1

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

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

4

2 回答 2

2

你也可以这样做：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>

查看此答案以获取更多信息。

于 2013-05-20T21:01:01.840 回答
1 
float: left;

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

于 2013-05-20T20:49:42.047 回答