Question

我需要将列表元素浮动到右边。在下面的示例中，我需要将元素SECOND和THIRD浮动到右边...

HTML

<ul id="ulelem">
    <li> First</li>
    <li> Second</li>
    <li> Third</li>
</ul

CSS

#ulelem{
    background-color:green;
}
#ulelem >li{
    display:inline-block
}

小提琴：

Fiddle Example

Answer 1

你可以给他们一个类名并将它们浮动到右边：

<ul id="ulelem">
    <li> First</li>
    <li class="right"> Second</li>
    <li class="right"> Third</li>
</ul>

的CSS：

.right {
    float: right;
}

但你需要切换第二和第三，否则它们的顺序会错误。

Answer 2

您可以将所有元素浮动到右侧，并移除第一个孩子上的浮动。 Here's how：

#ulelem > li{
    display: inline-block;
    float: right;
}

#ulelem > li:first-child {
    float: none;
}

Answer 3

使用display:inline-block和text-align:right的组合，然后将第一个li浮动。

JSfiddle Demo

<强> CSS

ul {
text-align:right;
}

li {
    display: inline-block;
    padding:0 1rem;
}

li:first-child {
   float:left;
}

Answer 4

如果您有权如何缩进HTML代码，可以使用text-align属性： DEMO HTML

<ul id="ulelem">
    <li> First</li>
    <li> Second</li><li> Third</li>
</ul>

CSS

#ulelem{
    background-color:green;
    text-align:justify;
    font-size:0.01px/* because IE dislike 0 */
}
#ulelem >li{
    display:inline-block;
    font-size:16px;/* fallback */
    font-size:1rem;

}
ul:after {
    content:'';
    display:inline-block;
    width:100%;
    vertical-align:top;
}

字体大小的故事和垂直对齐伪是为了避免在ul元素中绘制的额外线。如果没有背景或边距/填充，你可以跳过它这对你很重要。

右浮动列表元素在无序元素中

4 个答案: