0

我的页面顶部有这个菜单栏，但没有正确对齐。

链接旨在与栏对齐，因此它们的高度相同。

这里的例子。

HTML：

<html>
<head>
<title>DatNerd - Home</title>
<!--External Javascripts-->
<script src="externals/javascript/jquery-1.8.3.js"></script>
<script src="externals/javascript/jquery-ui.js"></script>
<script src="externals/javascript/jquery.cookie.js"></script>
<script src="externals/javascript/animated-hover.js"></script>
<script src="externals/javascript/javascript.js"></script>
<script src="externals/javascript/mobdetect.js"></script>
<!--External CSS-->
<link rel="stylesheet" href="externals/css/main.css" />
<link rel="stylesheet" href="externals/css/jquery-ui.css" /></head>
<body>

<div id="toolbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Stats</a></li>
<li><a href="#">Projects</a></li>
</ul>
</div>

</body>
</html>

CSS：

#toolbar
{
background: #b2b2b2; /* Old browsers */
background: -moz-linear-gradient(top,  #b2b2b2 2%, #2b2b2b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#b2b2b2), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b2b2b2 2%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b2b2b2 2%,#2b2b2b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b2b2b2 2%,#2b2b2b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b2b2b2 2%,#2b2b2b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2b2b2', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */
width:100%;
height:40px;
position:fixed;
top:0;
left:0;
line-height:40px;
}

#toolbar ul
{
list-style-type:none;
}
#toolbar a
{
float:left;
width:100px;
text-decoration:none;
color:white;
background-color:purple;
height:100%;
text-align:center;
}

#toolbar a:hover
{
background-color:#ff3300;
}

#toolbar li {
display:inline;
}
4

4 回答 4

1

您需要将 ul 的边距和填充设置为 0。您的浏览器（用户代理）具有默认样式。对于 ul，这包括边距、填充、列表样式等。您已经清除了列表样式类型，但没有其他内容。

#toolbar ul {
    padding: 0;
    margin: 0;
}

在浏览器中按 F12 以启动开发者工具。在这里，您可以检查元素以找到有问题的 CSS。如果您使用的是 FireFox，则可能需要安装 FireBug。其他主要浏览器都预装了开发工具。

于 2012-12-29T12:51:43.100 回答
1 
#toolbar ul {
  margin: 0;
  padding: 0;
}

通常，您可能会发现重置样式表很有帮助。

于 2012-12-29T12:52:57.237 回答
1

尝试这个：

#toolbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
于 2012-12-29T12:54:01.937 回答
0

将其粘贴在您的 css 中，因为它有助于阻止项目符号等.. 制作 ul li 列表时

ol, ul{list-style:none;}
于 2012-12-29T13:20:16.093 回答