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

Question

我已经玩了一段时间了，现在我想开始工作了。我会发布一个链接，链接到我正在做的事情的一个简化版本。

我有一个<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>

​

Answer 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。

Answer 2

float: left; 

李家现在看起来很完美！https://jsfiddle.net/Mnj5B/3/