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 コード:

.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 に答える
2

float: をCSSに追加してみてください

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

リストがページの右側に移動するのを防ぐために、追加の制限を追加する必要がある場合があります。

于 2012-10-26T13:38:14.273 に答える
2

まず、ではなくタグで<li>をラップする必要があります。<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 に答える
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 に答える
1

並べ替えてみませんか？リスト要素の順序の変更は表示の問題ではないため、CSS ではなく HTML で処理する必要があります。

ところで、li を aa ul タグで囲むのを忘れていました。

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

liまた、の直系の子孫であることはできませんdiv。ulまたは_ol

デモ

于 2012-10-26T13:40:02.540 に答える