0

インラインで表示される 5 つの項目のリストがあります。最初のリスト項目のテキストは左側に揃え、最後の項目は右側に揃える必要があります。私が欲しいのは、各アイテムのテキスト間の等間隔であり、右側と左側の両方に対して相対的であることです。

私はこれを見つけました: http://jsfiddle.net/Cerebrl/Wt4hP/ このスレッドで: A Space between Inline-Block List Items

すべてが左に揃えられているため、これは機能しません。ベローはサンプルコードであり、ここのjsfiddleでもあります： http://jsfiddle.net/phacer/uV9s9/

何か案は？js または jquery ソリューションがあれば、それも同様に機能します。

​<ul>
    <li>first item</li>
    <li>second item</li>
    <li>3 item</li>
    <li>fourth item</li>
    <li class='last'>5 item</li>
​&lt;/ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

ul { width: 650px; }
ul li { width: 130px; position: relative; display: inline-block; float: left; }
ul li.last { float: right; text-align: right; }​
4

2 に答える 2

2

%代わりに幅を指定して試すことができますpx 

ul { width: 650px; }
ul li { width: 20%; position: relative; display: inline-block; float: left; }
ul li.last { float: right; text-align: right; }​
于 2012-12-13T10:52:14.243 に答える
0

常に同じ数の要素と同じ幅のコンテナーを使用する場合は、これを試すことができます。

<ul>
  <li class='first'>first item</li>
  <li>second item</li>
  <li>3 item</li>
  <li>fourth item</li>
  <li class='last'>5 item</li>
</ul>​


ul { width: 650px; }
ul li { width: 130px; position: relative; display: inline-block; float: left; text-align: center; }
ul li.last { float: right; text-align: right; }
ul li.first {text-align: left; }​

http://jsfiddle.net/x96eN/1/

これは、あなたが求めているものだと思います。テキストの配置が異なるため、中央にわずかな束ができます。あなたは出来る：

  • すべての li 要素で左揃えのテキストを使用しますが、含まれているボックスを表示します。これにより、視覚的に物事のバランスが取り直されます。
  • 最初、最後、中央のリスの幅を調整して、効果を非表示にします。
  • パディングを使用して、さまざまな li 要素のテキストの位置を明確に変更します。
  • JQuery で一般的なケースを作成して、任意の数の li 要素を配置します。5 つより多くまたは少なくしたい場合、または全体の幅を変更する必要がある場合は、とにかくこれを行う必要があります。ただし、レイアウトだけに JS を使用するのは好きではありません。
于 2012-12-13T10:25:31.743 に答える