0

把握できていない CSS の問題があります。基本的に、固定の幅と高さのメニューがあります。メニューの背景は、灰色のバーとその下にドロップ シャドウがある単純なグラフィックです。そのメニューのcssは次のとおりです。

  #menu
   {
       width:1024px;
       height:63px;
       background: url(../images/menuholder.jpg);
       margin:0px;
   }

メニュー オプションを制御する CMS がありますが、この例では、ハードコーディングしています。私はCSSを使用して、要素を垂直方向の正しい場所に、灰色のバーの上に、垂直方向の中央に配置しています。これは問題ありません。ここに問題があります: 各メニュー オプションの間に幅 1 ピクセルの白い (#fff) 線を配置しようとしています。保存した画像を使用するよりも、完全に CSS を介してこれを行うことをお勧めします。このコードを使用して（一種の）それを行うことができました：

<div id="menu">
            <div id="upperNavLinks">
            <ul>
              <li style="border-right: 1px solid #fff;"><a href="Option1.aspx" target="_self">Option 1</a></li>
              <li style="border-right: 1px solid #fff;"><a href="Option2.aspx" target="_self">Option 2</a></li>
              <li style="border-right: 1px solid #fff;"><a href="Option3.aspx" target="_self">Option 3</a></li>
              <li style="border-right: 1px solid #fff;"><a href="Option4.aspx" target="_self">Option 4</a></li>
              <li style="border-right: 1px solid #fff;"><a href="Option5.aspx" target="_self">Option 5</a></li>
            </ul>   
            </div>
         </div>

その背後にあるCSSは次のとおりです。

#upperNavLinks
{
    float:left;
    padding-top:0px;
    padding-left:0px;  
}

#upperNavLinks ul
{
    list-style-type:none; 
}

#upperNavLinks ul li
{
    float:left;
}

#upperNavLinks ul a {
    padding-right: 18px;
    padding-left: 18px;
    display: block;
    text-decoration: none;
    font-family:PT Sans, Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-weight:bold;
    color: #333333;
}

#upperNavLinks ul a:hover 
{
    font-weight:bold;
    color: #a31624;
}

問題は、必要な場所に白い線を生成することですが、灰色のバーの上部から開始し、灰色のバーの下部まで進む必要がありますが、ドロップ シャドウの上ではありません。灰色のバーのサイズ (垂直方向) は 44px です。

だから、私が持っている質問は次のとおりです。実際のメニューオプションを中央に浮かせたまま、白い線を灰色のバーの上部に固定し、灰色のバーの上の垂直方向のスペースの 44 ピクセル (それ以上ではない) をカバーするにはどうすればよいですか?今のグラフィックの？

これが意味をなさない場合は、実際のグラフィックとコードをどこかに投稿できます。

4

2 に答える 2

0

空を配置することのセマンティックな意味は何ですか

  • の？個人的には、空のタグを作成するのではなく、このようなものに背景画像を使用します。

    • 于 2012-10-31T15:42:58.513 に答える
    0

    それぞれliの間にアンカーを付けて、別の を配置しli、今度はクラスを付けます (border と名付けました)。そのクラスに a display: block;、 a 、width: 1px;および a をheight: 20px;指定します。これで、高さを操作して、探している効果を得ることができます。

    http://jsfiddle.net/skeurentjes/4hJrb/1/

    于 2012-10-31T15:32:49.863 に答える