CSS 容器分成 4 个相等的部分答案

【问题标题】：CSS container divided in to 4 equal partsCSS 容器分成 4 个相等的部分
【发布时间】：2021-04-04 23:08:02
【问题描述】：

我已经玩了一段时间了，现在试图开始工作。我将发布一个指向我正在做的简化版本的链接。

我有一个 <ul> 设置为内联显示，每个 <li> 的宽度为 25%，从我能找到的所有内容中删除了填充和边距。理论上每个列表项不应该在容器中占据相等的空间吗？那么它不是。我很好奇选择菜单是否默认带有我不知道的额外填充。感谢你们提供的任何帮助。

https://jsfiddle.net/Mnj5B/1/

这里是 HTML：

试试这个：

/*--CSS--*/
     html body{
    padding: 0;
    margin: 0;
    }
    .container{
    width: 100%;
    height: 40px;
    background: yellow;
    text-align: center;
    padding: 0;
    margin: 0;
    }

    .container ul{
    list-style: none;
    height: 100%;
    padding: 0;
    width: 100%
    }

    .container ul li{
    display: inline-block;
    line-height: 40px;
    padding: 0;
    width: 25%;
    float:left;
    }

    .container select{
    height: 40px;
    padding: 0;
    background: orange;
    }

<!--HTML-->
     <section class="container">
     <ul>
    <li> one</li>
    <li><select>
        <option>TwoA</option>
        <option>TwoB</option>
        <option>TwoC</option>
        </select>
     </li>
    <li>three</li>
    <li>four</li>
    </ul>
    </section>

【问题讨论】：

在 Stack Overflow，代码通常比网站链接更受欢迎，因为一旦链接发生变化，问题将不再具有历史价值。访问here 获取有关将代码格式化为您的问题的帮助。使用jsFiddle 来帮助说明您的观点也可能会有所帮助。
有趣的问题。你可以 float:left 那些 li 项目，但我想你的问题是为什么 inline-block 不工作。
它们的宽度为 25%，但因为它们是 inline-blocks，它们之间会有空间，迫使最后一个到下一行。添加float: left 以查看this effect。另外，第二个@CodyGuldner 的评论。
那行得通。谢谢@Jeroen。

标签： html css

【解决方案1】：

您也可以这样做：https://jsfiddle.net/Mnj5B/13/

注意，CSS 没有改变，我们只是删除了结束/开始标签之间的空格。

<section class="container">
<ul>
    <li>one
    </li><li><select>
        <option>TwoA</option>
        <option>TwoB</option>
        <option>TwoC</option>
        </select>
     </li><li>three
    </li><li>four</li>
</ul>
</section>

查看this answer了解更多信息。

【讨论】：

现在这是真正的答案！ +1

【解决方案2】：

float: left;

现在的李似乎很完美！ https://jsfiddle.net/Mnj5B/3/

【讨论】：