1

この質問が以前にこことここで尋ねられたことは知っていますが、特定の問題に解決策を適用できませんでした。

次のような順序付けられていないリストがあります。

http://tinker.io/926d2/5

<nav>
    <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    /ul>
</nav>

ただし、最後の子は左にフロートし、他の要素は右にフロートする必要があります。

1つの注意点として、リスト要素の周りにクラスまたはhtmlを追加することは避けたいと思います。これらはPHPによって1つの変数で生成されるためです。ただし、nav および ul タグにクラスを追加することは問題ありません。

私がこれまでに思いついたのは、次のcssです。

nav li {
    display: inline;
    list-style: none;
    text-align: right;
}

nav li:last-child {
    text-align: left;
}

ただし、最初の 4 つの要素は、最後の子が左に整列することを「ブロック」しています。

最初の 4 つの要素を絶対にフローティングして配置しようとしましたが、理解できないようです。

どんなアイデアでも大歓迎です！

4

2 に答える 2

6

http://jsfiddle.net/T5xc9/このフィドルを参照してください。それはあなたが望むものを達成するためにtext-alignandを使用し、絶対的な位置を使用しません。floatすべてはrelative

于 2013-04-14T22:51:09.780 に答える
2

これは役に立ちますか？クラスは使用せず、ポジショニングのみを使用しました。 http://tinker.io/926d2/16

于 2013-04-14T22:44:10.330 に答える