李应该保持正确

Question

我有一个包含三个不同宽度的列表项的列表。如果第一个li大于另一个，则列表项左侧浮动（屏幕截图）。

有没有办法阻止它？

我的HTML

<ul>
    <li class="nav-button">
        <nav class="main-nav" style="width:400px">
        </nav>
    </li>
    <li style="width:200px"><a href="#"></a><i class="fa fa-envelope"></i></li>
    <li style="width:200px"><a href="#"></a><i class="fa fa-key"></i></li>
</ul>

Answer 1

这是你需要的。一个working JSFIDDLE（请在将来的问题中添加一个工作小提琴，这样我们就可以使用了。）

我所做的是为您的ul设置一个宽度，最大li填充ul的100％，其他填充ul的50％ 。 （因为这也是你的例子中发生的事情，400px和200px）。给这些块float: right;会将它们放在一行中。给margin-left解决了这个问题（因为50％+ 50％+ 10px + 10px> 100％宽度）。

<强> HTML

<ul>
    <li class="nav-button">
        <nav class="main-nav" style="width:400px;">
        </nav>
    </li>
    <li ><a href="#"></a><i class="fa fa-envelope"></i></li>
    <li ><a href="#"></a><i class="fa fa-key"></i></li>
</ul>

我已从HTML中删除了所有内嵌CSS，您也应该在项目中执行此操作。

<强> CSS

ul {
    padding: 0;
    width: 400px;
}

li {
    height: 100px;
    list-style: none;
    width: 50%;
    background: blue;
    margin-bottom: 5px;
}

li.nav-button {
    width: 100%;
    background: red;
}

li:not(.nav-button) {
    float: right;
    margin-left: 10px;
}