7

Webサイトのナビゲーションパネルを作成しようとしています。私はそれを以下で構成したいと思います：

  • 同じサイズの4つのタブで、各タブのテキストが中央に配置されます。
  • ページ幅全体を埋める必要があります。

柔軟でブラウザに優しいデザインにしたいと思っています。いろいろなフロートテクニックを試しましたが、うまくいきません。あなたが私を助けてくれることを願っています！

ありがとうございました。

4

3 に答える 3

17

HTML

編集：それは2015年であり、HTML5はしばらくの間そこにありました。次のコードは、ランドマークのARIA属性を持つnav要素（html5doctorrole="navigation" ）内にある必要があります（99.9％の確率で、特定のページで一意です）。

ナビゲーションパネルは、順序付けられていないリンクのリストを使用する必要があります。

<ul id="nav">
  <li><a href="#">One</a></li>
  <li><a href="#"> Second</a></li>
  <li><a href="#">Third</a></li>
  <li><a href="#">Fourth and last, so large that... worst case</a></li>
</ul>

CSS

EDIT2：2017年です。Flexboxを使用してください （ありまたはなしflex-wrap: wrap）

inline-blockは便利ですが、欠点が1つあります。2つの要素間の空白を注意深く管理する必要があります。</li>HTML5で削除されたかどうかにかかわらず、または</li>次の行の先頭で、</li><li>next itemまたは他のトリックのようにスタックした場合でも、何かを行う必要があります。そうしないと、2つの要素の間に最大4pxのギャップが作成されます。

合計が4の倍数でない場合、25％+ 25％+ 25％+ 25％はすべてのブラウザーで100％に等しくなりません。各ブラウザーには独自の丸め方法があります。

要素の幅を合計100％にし、幅を等しくしたい場合、別の方法は、display: tableブラウザに他のtable-cellテーブルアルゴリズムを使用するように強制することです。これは、セルの幅をコンテンツに適合させようとはしませんが、必要な幅を尊重します。可能な限り設計者/開発者によって。table-layout: fixed

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}
#nav {
  display: table;
  table-layout: fixed;
  text-align: center;
}
#nav li {
  display: table-cell;
  width: 25%;
  padding-right: 1px;
  height: auto;
  vertical-align: bottom;
}
#nav a {
  display: block;
  min-height: 100%;
  padding: 4px 10px;
  background-color: #222;
  color: white;
  border-radius: 6px 6px 0 0;
}

フィドル

http://jsfiddle.net/PhilippeVay/aHCy3/1/
編集： http： //jsfiddle.net/PhilippeVay/aHCy3/2/同僚の好意により、各タブ間のスペースに別の方法を使用。

于 2012-08-18T15:27:46.860 に答える
4

これにはフロートは必要ありません。幅を25％、または25％未満に設定するだけです。これをブロックレベルの要素で使用している場合は、を設定しdisplay: inline-blockます。これは、すべてのブラウザサイズで機能し、ウィンドウのサイズ変更にも対応します。

HTML

<div class="nav">Nav 1</div>
<div class="nav">Nav 2</div>
<div class="nav">Nav 3</div>
<div class="nav">Nav 4</div>​

CSS

body, html {
    width: 100%;
    padding: 0;
    margin: 0;
}
.nav {
    width: 24%; /*Slightly less than 1/4th of the width*/ 
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
}​​

ライブデモ

于 2012-08-18T14:36:20.270 に答える
0

css： 

.tab {
    float: left;
    width:25%;
    height:25px;
    background:black;
    border:1px solid #fff;
    box-sizing: border-box;
}​

html：

<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>​

jsfiddle： http: //jsfiddle.net/zP7Xh/6/

于 2012-08-18T14:35:16.433 に答える