html

Question

6 つのナビゲーションアイテムを 900px のコンテナー全体に均等に広げ、その間に均等な量の空白を入れたいと思います。例えば...

---| 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つあります。まず第一に、それは本当にそれを正当化するのではなく、ulタグ全体にliタグを均等に広げます..「HOME」や「ABOUT」などの小さなメニュー項目と「BASIC SERVICES」などの大きなメニュー項目の間に不均一な空白を作成します.

2 つ目の問題は、ナビゲーション全体に十分なスペースがあるにもかかわらず、ナビゲーションアイテムが 150 ピクセルを超えるとレイアウトが崩れることです。

誰でも私のためにこれを解決できますか? 私は解決策を求めてウェブを精査してきましたが、それらはすべて不足しているようです. できればCSS/HTMLのみ...

ありがとう！

更新 (2013 年 7 月 29 日): table-cell を使用することは、このレイアウトを実装するための最新の方法です。以下のフェリックスの答えを参照してください。このtable cellプロパティは、現在94% のブラウザーで動作します。IE7 以下について何かをする必要がありますが、それ以外は問題ありません。

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

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

score 39 · Accepted Answer

これは本当にうまくいきます。また、メディアクエリを使用して水平スタイルを簡単にオフにできるという利点もあります。たとえば、携帯電話で垂直方向にスタックしたい場合などです。

<ul id="nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS


#nav {
    display: table;
    height: 87px;
    width: 100%;
}

#nav li {
    display: table-cell;
    height: 87px;
    width: 16.666666667%;  /* (100 / numItems)% */
    line-height: 87px;
    text-align: center;
    background: #ddd;
    border-right: 1px solid #fff;
    white-space: nowrap;
}

@media (max-width: 767px) {
    #nav li {
        display: block;
        width: 100%;
    }
}

http://jsfiddle.net/timshutes/eCPSh/416/

score 7 · Accepted Answer

理想的なソリューションは次のとおりです。

ナビゲーションコンテナーの幅に合わせて自動的にスケーリングする
動的な数のメニュー項目をサポートします。

コンテナー内のシンプルなulメニューを使用しnavて、上記の要件を満たすソリューションを構築できます。

HTML

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Basic Services</li>
    <li>Specialty Services</li>
    <li>Our Staff</li>
    <li>Contact Us</li>
  </ul>
</nav>

まず、コンテナulの全幅を強制する必要があります。navこれを実現するために、:after疑似要素をとともに使用しwidth: 100%ます。

これで目的は完全に達成されますが、疑似要素の末尾に空白が追加されます。を 0 に設定し、その子で 100% に戻すことline-heightにより、IE8 を介してすべてのブラウザーでこの空白を削除できます。以下のCodePenの例とソリューションを参照してください。ulli

CSS

nav {
  width: 900px;
}

nav ul {
  text-align: justify;
  line-height: 0;
  margin: 0;
  padding: 0;
}

nav ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

nav ul li {
  display: inline-block;
  line-height: 100%;
}

score 3 · Accepted Answer

上記のすべてを試してみたところ、それらが不足していることがわかりました。これは、私が理解できる最も単純で最も柔軟なソリューションです (上記のすべてのインスピレーションに感謝します)。

HTML

<div id="container">
<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>
</div>

CSS

div#container{
  width:900px;
  background-color:#eee;
    padding:20px;
}
ul {
    display:table;
    width: 100%;
    margin:0 0;
    -webkit-padding-start:0px; /* reset chrome default */
}
ul li {
    display:table-cell;
    height:30px;
    line-height:30px;
    font-size:12px;    
    padding:20px 10px;
    text-align: center;
    background-color:#999;
    border-right:2px solid #fff;
}
ul li:first-child {
    border-radius:10px 0 0 10px;
}
ul li:last-child {
    border-radius:0 10px 10px 0;
    border-right:0 none;
}

もちろん、最初/最後の子の丸みを帯びた端を削除できますが、それらは本当にパーディだと思います（クライアントもそうです;）

コンテナーの幅によって水平方向のリストが制限されますが、必要に応じて、これを破棄して UL に絶対値を適用することができます。

必要に応じて、いじってください..

http://jsfiddle.net/tobyworth/esehY/1/

score 2 · Accepted Answer

これでうまくいくはずです。

<div id="nav-wrap">
    <ul id="nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

#nav-wrap {
    float: left;
    height: 87px;
    width: 900px;
}

#nav {
    display: inline;
    height: 87px;
    width: 100%;
}

.nav-item {
    float: left;
    height: 87px;
    line-height: 87px;
    text-align: center;
    text-decoration: none;
    width: 150px;

}

score 1 · Accepted Answer

たとえば、li 幅を 16%、マージン 0.5% に設定してみましたか?

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 16%;
  margin-right: 0.5%;
}

編集：ULを100％幅に設定します：

nav ul { 幅: 100%; マージン: 0 自動; }

score 1 · Accepted Answer

これは、CSS flexbox モデルが修正する種類のものです。これにより、各 li が残りの幅の等しい割合を受け取るように指定できるようになるためです。

score 1 · Accepted Answer

私は非常に多くのことを試しましたが、最終的に私にとって最も効果的なのは単純に追加することであることがわかりました padding-right: 28px;

パディングをいじって、アイテムを均等に配置するのに適切な量を取得しました。

score 0 · Accepted Answer

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { width: 100%; border: 1px solid black; display: block; text-align: justify; }
object, span { display: inline-block; }
span { width: 100%; }
</style>
</head>

  <div id="container">
    <object>
      <div>
      alpha
      </div>
    </object>
    <object>
      <div>
      beta
      </div>
    </object>
    <object>
      <div>
      charlie
      </div>
    </object>
    <object>
      <div>
      delta
      </div>
    </object>
    <object>
      <div>
      epsilon
      </div>
    </object>
    <object>
      <div>
      foxtrot
      </div>
    </object>
    <span></span>
  </div>
</html>

score 0 · Accepted Answer

幅を定義する代わりに、li に margin-left を配置して、間隔が一定になるようにし、margin(s)+li が 900px 以内に収まるようにします。

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

お役に立てれば。

score -1 · Accepted Answer

古いhtmlを悪用しているため、これを提供することをためらっています。これは良い解決策ではありませんが、解決策です。テーブルを使用してください。

CSS:

table.navigation {
    width: 990px;
}
table.navigation td {
    text-align: center;
}

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="navigation">
    <tr>
        <td>HOME</td>
        <td>ABOUT</td>
        <td>BASIC SERVICES</td>
        <td>SPECIALTY SERVICES</td>
        <td>OUR STAFF</td>
        <td>CONTACT US</td>
    </tr>
</table>

これはテーブルが作成された目的ではありませんが、同じアクションをより良い方法で確実に実行できるようになるまでは、ほぼ許容できると思います。

html - 一定数の水平ナビゲーション アイテムを、指定されたコンテナー全体に均等かつ完全に引き伸ばす方法

12 に答える 12

HTML

CSS

HTML

CSS

Related

Reference

html - 一定数の水平ナビゲーションアイテムを、指定されたコンテナー全体に均等かつ完全に引き伸ばす方法