0

html と css を使用して、水平線のすぐ上に水平メニュー バーを作成しようとしています。以下は私のコードです -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Horizontal Navigation Bar</title>

<style>

.nav 
   {
    float: right;
    padding: 0;
    list-style: none;
    background-color: #EDF2F8;
    border-bottom: 1px solid #99CCFF; 
    border-top: 1px solid #99CCFF; 
    }

.nav li 
   {
    float: right; 
    }

.nav li a 
   {
    display: block;
    padding-top:5px;
    padding-bottom:5px;
    padding-right:10px;
    padding-left:10px;
    text-decoration: none;
    font: small/1.3 Arial, Helvetica, sans-serif; 
    font-weight: bold;
    color: #104E8B;
    border-left: 1px solid #99CCFF; 
    }

.nav li a:hover 
    {
    color: #B03060;
    background-color: #ffffff; 
    }

    hr
   {
   border: 1px solid #BDBDBD;
   }



</style>
</head>

<body>
<ul class="nav">
        <li style="border-right: 1px solid #99CCFF; "><a href="#">About Us</a></li>
        <li><a href="#">Our Products</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
</ul>
<hr width="100%">
</body>
</html>

でもなんとなく、横線とメニューバーの間に隙間ができてしまい、これをなくしたい。どうすればそうできますか？

【追加】もう一つ質問ですが、見てみると横線の左右に隙間があります。このギャップも削除して、ページ全体を埋めることはできますか?

ありがとう、カルティック

4

4 に答える 4

2

の下部の余白を削除する必要がありulます。

アップデート：

本文からマージンを削除しhrて、ページ全体に表示されるようにします。

http://jsfiddle.net/EBNZM/1/

body {
    margin: 0;
}
.nav {
    margin-bottom: 0;
}
于 2013-06-27T19:56:54.523 に答える
0

ユーザーエージェントのスタイルシートです。

クロムの場合:-webkit-margin-after:

設定で解決

ul {
    margin: 0;
}
于 2013-06-27T19:56:55.450 に答える
0

これを試して：

.nav{
    margin-bottom: 0;
    ...
}

デモ。

メニューの下マージンを削除し、距離を削除するだけです。単純 ：）

于 2013-06-27T19:58:26.707 に答える