0

div の右側に余分なスペースがあります。Overflow:hidden と clear を試しましたが、それを取り除くことはできません:(

これは私のHtmlです

    <div id="menu">
    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="index.html">About</a></li>
        <li><a href="index.html">Team</a></li>
        <li><a href="index.html">Gallery</a></li>
        <li><a href="index.html">Services</a></li>
        <li><a href="index.html">Contact</a></li>
    </ul>
</div>

これがCSSです

#menu{
width: 800px;
height: auto;
border: none;
line-height:0;
margin-bottom: 10px;
}


/* Navigation */ 

#nav {
width: 100%;
overflow: hidden;
list-style: none;
display: inline;   
}

#nav ul {
list-style: none;
overflow: hidden;
}

#nav ul li{
padding: none;
margin: none;
border: thin black dashed;
}

#nav li a {
background: #7b7b7b;
border-right: 1px solid #474747;
color: #fff;
display: block;
float: left;
font: 400 18px 'Iceland', Tahoma, Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 14.1%;
-webkit-box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
}

#nav li a:hover {
background: #bf0302;
}

nav li:last-child a {
border: none;
}

/* End of Navigation */

これは、間隔が間違っているところです。（出典：picturetrail.com）写真

細い黄色の境界線はメニュー div で、赤い境界線はナビゲーションです。

4

1 に答える 1

2

問題は単純で、NAV LI A の右に 1 ピクセルの境界線を持っているため、これを補正する必要があります。

これを追加します：

マージン右:-1px;

最終的な CSS:

#nav li a {
   background: #7B7B7B;
   border-right: 1px solid #474747;
   color: white;
   display: block;
   float: left;
   font: 400 18px 'Iceland', Tahoma, Helvetica, Verdana, Arial, sans-serif;
   padding: 10px;
   text-align: center;
   text-decoration: none;
   margin-right: -1px;
   text-transform: uppercase;
   width: 14.1%;
   -webkit-box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
   box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
}

ワーキングデモ| 最終結果

于 2013-01-09T09:18:48.330 に答える