web-dev-qa-db-ja.com

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

6つのnavアイテムを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つあります。まず第一に、それは本当にそれを正当化するのではなく、liタグをulタグ全体に均等に広げます。 。

2番目の問題は、navアイテムが150pxを超えるとレイアウトが壊れるということです。これは、SPECIALTY SERVICESです。nav全体に十分なスペースがあるにもかかわらずです。

誰も私のためにこれを解決できますか？私はソリューションを求めてWebを精査してきましたが、それらはすべて不足しているようです。 CSS/HTML可能な場合のみ...

ありがとう！

更新（7/29/13）：table-cellを使用することが、このレイアウトを実装するための最新の最良の方法です。以下のfelixの回答をご覧ください。 table cellプロパティ ブラウザの94％で動作 現在。 IE7以下について何かする必要がありますが、それ以外は大丈夫です。

更新（13/30/13）：残念ながら、このレイアウトをメディアクエリと組み合わせている場合、これに影響するWebkitのバグがあります。今のところ、「display」プロパティの変更を避ける必要があります。 Webkitのバグを参照

更新（7/25/14）：text-align：justifyを含む、これに対するより良い解決策があります。これを使用する方が簡単で、Webkitのバグを回避できます。

htmlcssnavigationjustify
67
timshutes

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

フィドル

<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>

CSS

#nav {
    text-align: justify;
    min-width: 500px;
}
#nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
#nav li {
    display: inline-block;
}
94
Danield

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

HTML

<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/

38
felix

可能であれば、flexboxを使用します。

<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>

ul {
  display: flex;
  justify-content:space-between;
  list-style-type: none;
}

jsfiddle： http://jsfiddle.net/RAaJ8/

ブラウザのサポートは実際には非常に優れています（他の厄介なものにプレフィックスを付けて）： http://caniuse.com/flexbox

14
trias

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

  1. ナビゲーションコンテナの幅に合わせて自動的に拡大縮小する
  2. メニュー項目の動的な数をサポートします。

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%を使用します。

これにより、目標は完全に達成されますが、擬似要素から末尾の空白が追加されます。 ulのline-heightを0に設定し、そのli子で100％に戻すことにより、IE8を介してすべてのブラウザーでこの空白を削除できます。例CodePenと以下の解決策を参照してください。

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%;
}
7
Anthony DiSanti

私は上記のすべてを試してみて、彼らが望んでいることがわかりました。これは、私が考え出した最も単純で最も柔軟なソリューションです（インスピレーションについては上記のすべてに感謝します）。

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/

3
Astravagrant

これはあなたのためにそれを行う必要があります。

<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;

}
2
Brian

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

1
Neil

Li幅を、たとえば0.5％のマージンで16％に設定しようとしましたか？

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

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

nav ul {幅：100％;マージン：0自動; }

1
BJ Safdie

私は非常に多くのことを試しましたが、最終的に私に最適なのは、padding-right: 28px;

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

1
Jen
<!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>
0
Paul Sweatte

幅を定義する代わりに、liに左マージンを置くだけで、間隔が一定になるようにし、マージンとliが900px内に収まることを確認できます。

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

お役に立てれば。

0
TNC