我有这个菜单:
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float:left; }
#navbar li a:hover{
background-color: #CCC;
}
#navbar li a {
border: 1px solid #000;
display: block;
margin-right: 18px;
margin-left: 18px;
padding: 3px 8px;
background-color: #FFF;
color: #000;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #FFF;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #CCC; }
<ul id="navbar">
<li><a href="index.php">Start</a></li>
<li><a href="index.php">Vad?</a></li>
<li><a href="index.php">Kom igång!</a></li>
<li><a href="#">Läringsartikler</a><ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
<li><a href="#">Läringsfilmer</a><ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Numero Tres</a></li></ul>
</li>
</ul>
你可以在导航栏中看到{我试图使用text-align:center或margin:auto但它仍然不会将整个菜单放在中心.. 为什么? 当我将导航栏li更改为浮动中心而不是向左浮动时,它会使整个菜单变得愚蠢
答案 0 :(得分:0)
您需要在导航栏上指定宽度。
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
width: 400px;
}
答案 1 :(得分:0)
'float'样式属性
有 NO 中心值- 哎呀dint看到那条评论
答案 2 :(得分:0)
如上所述,没有Float:center。为了使用margin-left和margin-right auto进行居中,您需要设置宽度(如上所述)或将其更改为display:block。
如果您不想设置宽度或不能设置宽度,那么可以轻松设置一个名为Shrink Wrapping的CSS hack。