0

这是场景：

<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

请问我怎样才能做到这一点？

4

6 回答 6

2

尝试在 CSS 中添加 float: right

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

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

于 2012-10-26T13:38:14.273 回答
2

首先，您需要<li>用标签包装您的 s <ul>，而不是<div>.

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

​<a href="http://jsfiddle.net/scrimothy/hKWJx/" rel="nofollow">小提琴

于 2012-10-26T13:40:01.600 回答
2

试试这个

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>

演示

于 2013-06-11T05:18:35.827 回答
1

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

顺便说一句，您忘记将 li 包装在 ul 标记中。

<ul>
  <li></li>
</ul>
于 2012-10-26T13:39:43.420 回答
1 
ul {
    width: 50px;
}
li {
    display: inline-block;
    float: right;
}​

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

演示

于 2012-10-26T13:40:02.540 回答
1

使用 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>
于 2012-10-26T13:42:14.727 回答