23

いくつかのリストアイテムをバー上で水平に分散させたいのですが、コードをモジュール化して、さらに挿入するとアイテム間のスペースが自動的に調整されるようにします。

最初のアイテムを左端に、右のアイテムを右端に配置し、残りをその間に配置したいと思います。それらはすべて互いに等しいスペースを持っています。線分をいくつかの部分に分割することを考えてください。アイテムは、元の線分の頭/尾だけでなく、分離点をマークします。

私はいくつかの解決策を試し、いくつかをオンラインで見つけましたが、それらは私が望むことをしません。以前の例えによれば、各アイテムを各ラインピースの中央に配置するように、すべてを中央に配置するだけです。

誰かがCSSで素晴らしい解決策を提供できますか？

4

4 に答える 4

29

inline-block、疑似要素、およびを使用した後は、現在の操作を実行できますがtext-align: justify;、IE8以降でのみ機能します。

コードは次のとおりです。

<!-- HTML -->

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

​
/* CSS */

ul {
    text-align: justify;
}
ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}
ul:before {
    content: '';
    display: block;
    margin-top: -1.25em;
}
li {
    display: inline-block;
    margin-right: -.25em;
    position: relative;
    top: 1.25em;
}

ライブデモ： http： //jsfiddle.net/joshnh/UX9GU/ </ p>

于 2012-11-22T04:14:02.250 に答える
9

クリーンな解決策があります：

http://radiatingstar.com/distribute-divs-images-equaly-line

#container {
    text-align: justify;
}
#container > div {
    width: 100px; /* Declare your value. Can be in relative units. */
    display: inline-block;
    vertical-align: top;
}
#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}
于 2014-04-01T08:41:09.077 に答える
7

joshnhの回答に加えて、誰かが同じ問題を抱えている場合：

注意：動作するには、すべての要素text-align: justify;の後にスペースが必要です。display: inline-block;それ以外の場合、要素は1つの単語として扱われ、水平方向に分散されません。

したがって、これは機能しません。

<!-- HTML -->
<ul><li>Item 1<li><li>Item 2<li><li>Item 3<li><li>Item 4<li></ul>

しかし、これは次のようになります。

<!-- HTML -->
<ul>
  <li>Item 1<li>
  <li>Item 2<li>
  <li>Item 3<li>
  <li>Item 4<li>
</ul>

HTMLマークアップを縮小していて、ミニファイアがすべてを1行にまとめているため、この問題が発生しました。

于 2016-08-27T15:32:47.617 に答える
3

2019年には、そのためのフレックスソリューションがありますjustify-content: space-between 

<ul>
  <li>Item 1<li>
  <li>Item 2<li>
  <li>Item 3<li>
  <li>Item 4<li>
</ul>

ul {
  width: 100%; /* Your element needs a fixed width */
  display: flex;
  justify-content: space-between;
}
于 2019-10-28T12:41:39.430 に答える