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

Question

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

我有<ul>设置为内联显示，每个<li>的宽度为25％，填充和边距从我能找到的所有内容中删除。从理论上讲，每个列表项不应占用容器中相等的空间吗？好吧，不是。我很好奇，如果选择菜单默认带有额外的填充，我不知道。我感谢你们给予的任何帮助。

http://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

您也可以执行此操作：http://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; 

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