我有一个无序列表,用作简单的导航栏。如下所示:
正如您所看到的,尽管<li>
元素并没有一直对齐到<div>
它们所在的左侧。我已经尝试text-align: left;
过包含<div>
但似乎没有效果。
#menu {
width: 800px;
margin: 0 auto;
}
#menu div {
float: left;
width: 400px;
height: 60px;
background-color: #CACACA;
}
#menutop {
text-align: left;
}
#menutop ul {
list-style: none;
}
#menutop li {
display: inline;
padding: 10px;
}
#menutop a {
color: #000000;
text-decoration: none;
}
#menutop a:hover {
text-decoration: underline;
}
<div id="menu">
<div id="menutop">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
有任何想法吗?