4

5 つのリンクを含む水平ナビゲーション バーを作成したいとし、幅を 20% に設定したとします。リンクに 1 ピクセルの境界線を追加するとすぐに、リンクが 20% を超えて大きくなり、最後のリンクが新しい行に移動します! この問題を回避するにはどうすればよいですか?

CSS で負のパディング値を指定できるようにして、境界線が実際に要素の周囲ではなく要素の上にくるようにしたいと思っていましたが、それは許可されていません。

4

3 に答える 3

13

IE6/7 が必要な場合は、追加の内部要素が必要になるか、負のマージンを試すことができます。ナビゲーションにリストを使用し、リンク自体に境界線を追加することをお勧めします。

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

これは間違いなく(更新:以前は。HTML5 では 、リストの周りに要素を使用できるようになりましたnav)、ナビゲーション用の最もセマンティックなマークアップです。次に、CSS は次のようになります。

#nav li {
  float: left;
  width: 20%;
}

#nav li a {
  display: block;
  border: 1px solid #000;
}

または: さらに楽しみたい場合は、代わりに CSS3 box-sizing 宣言を試すことができます。これは現在、すべての最新ブラウザー (IE6/7 を除く) で利用できます。

#nav li {
  /* Opera 8.5+ and CSS3 */
  box-sizing: border-box;
  /* Firefox 1+ */
  -moz-box-sizing: border-box;
  /* IE8 */
  -ms-box-sizing: border-box;
  /* Safari 3+ */
  -webkit-box-sizing: border-box;
于 2009-08-26T09:14:39.473 に答える
2

-1px の余白が機能する場合があります。YMMV。

于 2009-08-26T09:09:48.903 に答える
2

いいえ、ボックスモデルは合計に境界線を追加するので、特定の幅を追加する必要がある場合は混合しません。あなたの場合は100％、必要なオブジェクト内にdiv（またはいくつかのブロック要素）を配置します20%にしてボーダーで100%にします。

于 2009-08-25T22:38:20.533 に答える