Question

由于某种原因，我的topnav不是我的浏览器窗口的全宽（它几乎是窗口的全长，但两端都不完全），而且它和顶部之间还有一点空间浏览器窗口。

我如何做到这一点不是这样的？这是我的代码：

#topnav
{
background-color: #A9A9A9;
margin: 0;
margin-bottom: 25;
padding: 0;
}

#topnav ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
#topnav li
{
display:inline;
}
#topnav a:link,a:visited
{
font-weight:bold;
font-size: 12px;
color:#FFFFFF;
background-color:#A9A9A9;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#topnav a:hover,a:active
{
background-color:#808080;
}

这是HTML：

<div id="topnav">
<ul>
<li><a href="index.psp" id="index">Index</a></li>
<li<a href="inventory.psp">Inventory</a></li>
<li><a href="/checkup/checkup.psp">Check-Up</a></li>
</ul>
</div>

编辑：现在条形图遍布浏览器，但顶部仍有差距。

此外，差距仅存在于Firefox中 - 它不会显示在Chrome中。我的整个事情在IE中搞砸了。

Answer 1

到顶部问题试试这个：

#topnav {
background-color: #A9A9A9;
margin: 0;
margin-bottom: 25;
padding: 0;

position:absolute;
top:0;
}

Answer 2

#topnav - ＆gt;保证金和应删除填充，因为它是0.＃topnav ul。

的计数相同

您可以将导航窗格合并到宽度为100％的div中。如果这对您有用，请告诉我。

- 编辑：这应该适用于FF / Chrome / IE（只是测试过）

<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}

#topnav
{
background-color: #A9A9A9;
margin-bottom: 25;
width:100%;
top:0;
}

#topnav ul
{
list-style-type:none;
padding-top:6px;
padding-bottom:6px;
}

#topnav li
{
display:inline;
}
#topnav a:link,a:visited
{
font-weight:bold;
font-size: 12px;
color:#FFFFFF;
background-color:#A9A9A9;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
#topnav a:hover,a:active
{
background-color:#808080;
}
</style>
<head/>
<body>
<div id="topnav">
<ul>
<li><a href="index.psp" id="index">Index</a></li>
<li<a href="inventory.psp">Inventory</a></li>
<li><a href="/checkup/checkup.psp">Check-Up</a></li>
</ul>
</div>
</body>
</html>

把酒吧放在窗户的绝对顶部，一直穿过

2 个答案: