对齐右边？

Question

我正在尝试将列表中的最后一个元素对齐到右边：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li id="right">right?</li>
</ul>

li {
    display: inline-block;
    margin: 0;
    padding: 2px;
}
ul {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
}
li#right {
    text-align: right;
}

它不起作用所以我想我从根本上误解了一些东西。但是什么？

这里有一个小提琴：http://jsfiddle.net/lborgman/b22g7/

Answer 1

您可以绝对定位最后一个元素以达到您想要的效果，而无需应用任何clearfix来纠正浮动引起的问题。

ul {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
li#right {
    position: absolute;
    right: 0px;
}

JSFiddle

Answer 2

text-align将元素的文字对齐到右侧。这是在做什么。你无法看到它。如果blah blah blah<br />blah中有<li>，那么您可以在日期看到对齐清楚。

如果您希望<li>本身位于右侧，请尝试使用float:right，但请记住，您可能需要将其移至第一个。

Answer 3

这是一种方法：

http://jsfiddle.net/b22g7/6/

HTML：

<div class="container">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li id="right">right?</li>
    </ul>
</div>

CSS：

.container {
    overflow: auto;
}

ul {
    width: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ff3;
}

li {
    float: left;
    border: solid 1px blue;
    margin: 0;
    padding: 2px;
}

li#right {
    float: right;
}

Answer 4

您的意思是float: right;而不是text-align。

text-align只会将文字对齐在＆＃39;内。 li

Answer 5

只需添加li:last-child{float:right;}并删除ID，您就不需要