Question

以下是该方案：

<div class="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>

和CSS：

.menu li {display:inline}

结果将是：

1  2  3

但我想从右到左显示它们：

3  2  1

我怎样才能做到这一点？

Answer 1

尝试将float：right添加到CSS

.menu li {display:inline; float: right;}

您可能需要添加其他限制以防止列表飞到页面右侧

Answer 2

首先，您需要使用<li>标记包裹<ul>，而不是<div>。

li {
  list-style: none;
  float: right;
}
ul{
  float: left;
}

Fiddle

Answer 3

试试这个

CSS代码：

.menu li {display:inline}
.menu ul{direction:rtl;}

HTML代码：

<div class="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>

Demo

Answer 4

你为什么不重新安排他们？更改列表元素的顺序不是表示问题，因此不应由CSS处理，而是由HTML处理。

顺便说一下，你忘了将你的李包裹在一个ul标签内。

<ul>
  <li></li>
</ul>

Answer 5

ul {
    width: 50px;
}
li {
    display: inline-block;
    float: right;
}

此外，您不能让li成为div的直接后代。使用ul或ol

Demo

Answer 6

使用HTML5的新reversed属性，您可以告诉浏览器列表项的编号应按降序显示，而不是默认升序。

<ol reversed>  
    <li>List item one</li>  
    <li>List item two</li>  
    <li>List item three</li>  
    <li>List item four</li>  
    <li>List item five</li>  
</ol>

在HTML中右侧显示内联列表（li）

6 个答案: