☰

指定されたコンテナ全体に一定数の水平ナビゲーション項目を均等に広げる方法 質問する

tag-icon • tag-icon html css navigation justify
指定されたコンテナ全体に一定数の水平ナビゲーション項目を均等に広げる方法 質問する

900 ピクセルのコンテナーに 6 つのナビゲーション項目を均等に配置し、項目間に均等な空白を配置したいと思います。たとえば...

---| 900px Container |---

---| HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US |---

現時点では、これを行うための最良の方法は次のとおりです。

nav ul {
  width: 900px; 
  margin: 0 auto;
}

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 150px;
}

これには 2 つの問題があります。まず、これは実際には正当化されておらず、li タグが ul タグ全体に均等に分散されているため、「HOME」や「ABOUT」などの小さなメニュー項目と「BASIC SERVICES」などの大きなメニュー項目の間に不均一な空白が作成されます。

2 番目の問題は、ナビゲーション項目が 150 ピクセルより大きい場合 (SPECIALTY SERVICES の場合がこれに該当)、ナビゲーション全体に十分なスペースがあるにもかかわらず、レイアウトが崩れてしまうことです。

どなたかこの問題を解決していただけませんか? 解決策を Web で探しましたが、どれも不十分なようです。可能であれば CSS / HTML のみ...

ありがとう！

更新（2013年7月29日）：テーブルセルを使用するのがこのレイアウトを実装する最も現代的な方法です。以下のフェリックスの回答を参照してください。table cellプロパティ94%のブラウザで動作します現時点では、IE7 以下については何らかの対策を講じる必要がありますが、それ以外は問題ないはずです。

更新 (2013 年 7 月 30 日): 残念ながら、このレイアウトをメディア クエリと組み合わせる場合、これに影響を与える Webkit のバグがあります。現時点では、「display」プロパティの変更は避ける必要があります。Webkit のバグを参照してください。

更新 (2014 年 7 月 25 日): この問題に対するよりよい解決策として、text-align: justify を使用する方法があります。これを使用すると簡単になり、Webkit のバグを回避できます。

ベストアンサー1

アイテムを均等に分散する最新の方法は、コンテナ要素に次の 2 つの宣言を設定することです。

.container {
  display: flex; /* (1) */
  justify-content: space-between; /* (2) or space-around or space-evenly */ 
}

使用する値は、justify-contentどのような均等配分が必要かによって異なります。

ここに画像の説明を入力してください

見る翻訳

ul {
  list-style: none;
  padding: 0;
  width: 90vw;
  border: 3px solid gold;
  display: flex;
}
a {
  background: gold;
}
ul {
  justify-content: space-between;
}
ul ~ ul {
  justify-content: space-around;
}
ul ~ ul ~ ul {
  justify-content: space-evenly;
}
<h3>justify-content: space-between; </h3>

<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">BASIC SERVICES</a></li>
  <li><a href="#">OUR STAFF</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
<div>Distributes items evenly. The first item is flush with the start, the last is flush with the end </div>
<hr>
<h3>justify-content: space-around;</h3>
<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">BASIC SERVICES</a></li>
  <li><a href="#">OUR STAFF</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
<div>Distribute items evenly. Items have a half-size space on either end</div>
<hr>
<h3>justify-content: space-evenly;</h3>
<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">BASIC SERVICES</a></li>
  <li><a href="#">OUR STAFF</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
<div>Distribute items evenly. Items have equal space around them</div>
<hr>

これが私の元の答えです - 何らかの理由でフレックスコンテナの使用が実行できない場合

text-align:justifyコンテナで使用すると、リストにいくつの要素があっても機能します（各リスト項目の%幅を計算する必要はありません）。

    #nav {
        text-align: justify;
        min-width: 500px;
    }
    #nav:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
    #nav li {
        display: inline-block;
    }
<ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">BASIC SERVICES</a></li>
    <li><a href="#">OUR STAFF</a></li>
    <li><a href="#">CONTACT US</a></li>
</ul>

フィドル

おすすめ記事