简单的导航栏滚过间隙

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (10)

只是一个简单的简单html / css问题,我确定有人能够轻松回答。我是一个编码新手,因此为什么我问:)

所以我正在制作一个导航栏,由包含在div标签中的无序列表制成,翻转以更改每个链接的背景颜色。(我希望我的编码术语有意义)继承我的代码:

<!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=UTF-8" />
    <title>Thomson Automotive Ebay Store</title>
    <style type="text/css">
        #navbar ul {
            background-color: #000;
            text-align: center;
            padding: 10px;
        }
        #navbar ul li {
            display: inline;
            font-family: Arial, Helvetica, sans-serif;
            list-style-type: none;
        }
        #navbar ul li a {
            color: #FFF;
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            text-decoration: none;
            font-weight: bold;
            padding: 10px 10px;
        }
        #navbar ul li a:hover {
            background-color: #0085D7;
        }
    </style>
</head>

<body>
    <div id="navbar">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">ADD TO FAVORITES</a></li>
            <li><a href="#">DELIVERY & RETURNS</a></li>
            <li><a href="#">FEEDBACK</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
</body>

</html>

所以我唯一的问题是在Firefox中预览时,当我滚动链接时,背景颜色变化似乎没有正确填满我的导航栏,底部留下1-2像素间隙,如下所示: http:// i .imgur.com / OvpXdiQ.jpg

轻微,我知道,但只是想知道我的编码是否有问题,或者它只是一个浏览器问题。

谢谢 :)

提问于
用户回答回答于

从中删除填充#navbar ul

添加以下属性#navbar ul li a

{line-height: 40px; display: inline-block; padding: 0px 10px;}

线高将决定导航的高度,并垂直居中您的文字!Inline-Block提供高度,因此您不需要任何填充顶部或底部,只需要侧面。

扫码关注云+社区

领取腾讯云代金券