Question

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

链接意味着与条形对齐，因此它们的高度相同。

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;
}

Answer 1

您需要将ul的边距和填充设置为0.您的浏览器（用户代理）具有默认样式。对于ul，这包括margin，padding，list-style等。你已经清除了list-style-type，但没有别的。

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

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

Answer 2

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

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

Answer 3

试试这个：

#toolbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Answer 4

将它粘贴在你的CSS中，因为它有助于在制作ul li列表时停止制造点......

ol, ul{list-style:none;}

为什么文字不对齐？

4 个答案: