У меня есть неупорядоченный список, который я использую в качестве простой панели навигации. Это выглядит следующим образом:
Как вы можете видеть, элементы <li>
не выравниваются полностью слева от <div>
, в которых они содержатся. Я пробовал text-align: left;
в содержащем <div>
, но, похоже, нет эффект.
Соответствующий HTML:
<div id="menu">
<div id="menutop">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Соответствующий CSS:
#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;
}
Любые идеи?