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
}

Answer 1

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

​li{
   display:inline-block
}​