CSS中div样式失效 逻辑门模块布局不符合预期问题求助

问题根因 #

1. 你给#operator下拉框设置了display: inline，行内元素不支持自定义宽高，你写的80px宽度完全没生效，导致下拉框尺寸不对。
2. 所有内部元素都用了float: left，父容器#boolean没做浮动清除，触发高度塌陷，外层的#module没法正常把内容都包进去。
3. #equal的margin设成了全方向55px，数值太大，把等号位置顶歪了，还会挤得其他元素换行。
4. 用浮动做这种水平排列的布局本身就很难控制垂直对齐，非常容易出现上下错位的问题。

修复代码 #

不用改HTML，直接替换原有CSS就行：

/* 给父容器加flex布局，替换浮动，对齐更稳 */
#boolean {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
#operator{
    width: 80px; 
    max-width: 80px;
    background: transparent; 
    border: 0;
    font-size: 30px; 
    text-align: center; 
}
#equal{
    width: 36px;
    font-size: 50px;
    margin: 0 10px;
    background: transparent; 
}
.bulb{
    background-image:url(assets/zarovka_off.png); 
    background-size: 100%; 
    width: 50px; 
    height: 80px; 
}
.switch {
    background-image:url(assets/switch_off.png); 
    background-size: 100%; 
    width: 76px; 
    height: 76px;
}
#module {
    background-color: #04c4d911;
    border-left: 6px solid #04C4D9;
    padding: 20px;
}

如果要调整元素之间的间距，直接改#boolean里的gap数值就行，不用给每个元素单独加margin，调整起来更方便。

内容的提问来源于stack exchange，提问作者Jakub Mitrega。