0

ここに示す Web サイトのヘッダー ナビゲーション メニューを更新中です。

ご覧のとおり、テキストとセパレーターが押し下げられ、メニューがオフに見えます。いくつかの異なることを試しましたが、役に立ちませんでした。上部に余分なパディングを入れずに、テキストとセパレーターを互いに垂直方向に揃えたいと思います。

CSS

/*Header Link Wrap & Align*/

#nav-wrap { 
    width: 100%;
    overflow: hidden;
    height: 52px;
    background-image: url(/nd/images/hlink-bg.jpg);
    background-repeat: repeat-x;

}


#nav {
    text-align: center;

}

#nav li {
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    padding: 0px 10px 0px 0px;
}

#nav a {
    color: #FFFFFF;
    display: inline-block;
    font-family:arial;
    margin: 0;
    padding: 9px 18px 9px 18px;
    text-decoration: none;
    vertical-align: middle;
}

#nav a:hover {
    background-color: #ffa500;
    color: #fff9;
}




.head-divider {
    list-style: none;
    vertical-align: middle;
    display: inline-block; 
    margin: 0;
    width:2px;
    height:52px;
    background-image:url(/nd/images/h-divider.jpg);
    background-repeat: no-repeat;

}

HTML

<div id="nav-wrap">
    <ul id="nav">
    <li><a href="homes.php">Custom Homes</a></li>
    <li class="head-divider"></li>
    <li><a href="inspections.php">Inspection Services</a></li>
    <li class="head-divider"></li>
    <li><a href="energy.php">Energy Audits</a></li>
    <li class="head-divider"></li>
    <li><a href="contact.php">Contact</a></li>
    </ul>   
</div>  
</div>

あなたの助けに感謝します。

4

1 に答える 1

2

marginとpaddingの を簡単にリセットできます<ul>。

次のスタイルを追加します#nav。

#nav{
  margin:0px;
  padding:0px;
}
于 2013-02-19T02:20:14.587 に答える