html - 右对齐上的CSS错误顺序

Question

考虑遵循 HTML。我想将第一个li项目向左对齐，最后两个向右对齐。但是，将右对齐设置为最后两个会将中间li放在最右边，最右边li放在中间。我该如何解决这个订单？

HTML：

<ul>
    <li class="one">left</li>
    <li class="two">right</li>
    <li class="three">right last</li>
</ul>

CSS：

ul{
    width: 100%;
    overflow: hidden;
}

ul li{
    float: left;
}

ul li.two,
ul li.three{
    float: right
}

score 1 · Accepted Answer

你可以display:inline-block用来对齐 li，你可以width用来调整

li{
   display:inline-block
}

score 0 · Accepted Answer

这种行为是正确的，因为您开始将中间的 li 向右对齐，所以它是第一个被绘制到右侧的。然后最后一个跟随到右侧。

在使用“float”时，我不知道如何使用两个不同的 ul-tags。

score 0 · Accepted Answer

您在中定义的样式中缺少逗号"float: right"。它应该是"float:right;"

尝试这个

ul{
    width: 100%;
    overflow: hidden;
}

ul li{
    float: right;
    display: block;
    clear: both;
}

ul li.one{
    float: left;
}

让我知道问题是否仍然存在。

3 回答 3