1

#menu800px 幅の div という名前があります。その中に、8 つのナビゲーション リンクがあります。その中の要素はできるだけ長くし、すべて同じ幅にする必要がありますが、一緒に 1 つの行で親 div を埋める必要があります (つまり、折り返しなしで)。

各要素の間には、1 ピクセルの境界線 (またはおそらく 1 ピクセルのサイド マージン) が必要です。現在のページのリンク (リンク#currentが適用されているもの) を除くすべてのリンクには、1px solid #505050下の境界線が必要です。現在のページ リンクには、下の境界線が表示されないようにする必要があります (ナビゲーション タブがコンテンツ div と「マージ」されるようにするため)。

私の現在のコードは、私がすでに望んでいることのほとんどを実行しますが、リンク間の境界線/マージンがありません...境界線/マージンを側面に追加すると、明らかに、現在の12.5%幅 (以下の CSS コードを参照) が不正確になり、クロスブラウザー#menuのdivを満たすように微調整しないでください(少なくとも 1 つのブラウザーで、要素が div をオーバーフローするか、塗りつぶしません)。#menu

CSS:

#menu {
  border:1px solid #505050;
  border-bottom:none;
  width:800px;
}

#menu a {
  display:inline-block;
  outline:none;
  text-align:center;
  width:12.5%;
  padding-top:12px;
  padding-bottom:10px;
  background-image:url(/img/menu.gif);
  border-bottom:1px solid #505050;
  color:#D9D9D9;
  font-weight:bold;
  font-size:13px;
  font-family:Verdana, sans-serif;
  text-shadow:1px 1px #505050;
}

#menu #current {
  background-image:url(/img/menu_current.gif);
  color:#505050 !important;
  border-bottom-color:#D9D9D9;
  text-shadow:none;
}

HTML:

  <div id="menu">
    <a href="/page1.html" id="current">Link 1</a>
    <a href="/page2.html">Link 2</a>
    <a href="/page3.html">Link 3</a>
    <a href="/page4.html">Link 4</a>
    <a href="/page5.html">Link 5</a>
    <a href="/page6.html">Link 6</a>
    <a href="/page7.html">Link 7</a>
    <a href="/page8.html">Link 8</a>
  </div>

2 つの要件:

  • このソリューションは、IE6 以降の IE バージョン、および最近のバージョンの Firefox、Chrome、Safari、Opera で動作するはずです。
  • JavaScript は使用しないでください

次の場合は大きなプラスです。

  • このソリューションは、要素の幅を再調整することなくリンクを追加できるように機能します

もちろん、CSS/HTML を完全に書き直すこともできます。上記のコードを再利用する必要はありません。私は独自のアプローチを示しているだけです。また、text-shadow ルールが IE6 でサポートされていないことは承知していますが、必須ではありません。

現在の様子 現在の様子

期待される結果 期待される結果

4

2 に答える 2

0

こんにちは私はあなたがこの デモをしたいと思います

このようにスタイルシートにいくつか追加cssします

#menu{
font-size:0;
}
#menu a {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
#menu a + a{
border-left:solid 2px black;  // depent your design .
}

ライブデモ

デザインに合わせて色やボーダーを変更してください。

于 2012-10-24T04:11:14.057 に答える
0

もう 1 つの方法は、div の代わりに html テーブルを使用することです。

＃メニュー{
  幅：800px;
  ボーダー崩壊:崩壊;
}

#menu td.other {
  border:1px ベタ黒;
}
td a {
  display:inline-block;
  アウトライン:なし;
  テキスト揃え:中央;
  幅:100%;
  パディングトップ:12px;
  padding-bottom:10px;
  背景画像:url(/img/menu.gif);
  色:#D9D9D9;
  font-weight:太字;
  フォントサイズ:13px;
  font-family:Verdana、sans-serif;
  text-shadow:1px 1px #505050;
}
#menu#current {
  background-image:url(/img/menu_current.gif);
  color:#505050 !重要;
  ボーダーボトムカラー:#D9D9D9;
  テキストシャドウ:なし;
  border-left:1px ベタ黒;
  border-right:1px ベタ黒;
  border-top:1px ベタ黒;
  border-bottom:1px ソリッド #D9D9D9;
}

<table id="menu" border="0">
<tr>
    <td id="current"><a href="/page1.html">Link 1</a></td>
    <td class="other"><a href="/page2.html">Link 2</a></td>
    <td class="other"><a href="/page3.html">Link 2</a></td>
    <td class="other"><a href="/page4.html">Link 2</a></td>
    <td class="other"><a href="/page5.html">Link 2</a></td>
    <td class="other"><a href="/page6.html">Link 2</a></td>
    <td class="other"><a href="/page7.html">Link 2</a></td>
    <td class="other"><a href="/page8.html">Link 2</a></td>
</tr>

于 2012-10-24T05:05:38.933 に答える