我想居中对齐菜单,我尝试使用文本对齐,但仍然没有结果
以下是html代码:
<div id="menu" class="clearfix">
<ul>
<li><a href="{$base_url}/index.php">HOME</a></li>
<li><a href="{$base_url}/recent/">WATCH</a></li>
<li><a href="{$base_url}/tags/">TAGS</a></li>
<li><a href="{$base_url}/channels/">CHANNELS</a></li>
</ul>
<br style="clear:both">
</div>
和使用的CSS:
#menu {
width: 100%;
margin-bottom: 2em;
margin-top: 5px;
border-top: 1px solid #333;
border-bottom: 1px solid #515152;
text-align: center;
background-image: url("./images/menu.gif");
}
#menu ul {
font: bold 11px Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li {
float: left;
display: inline;
background-color: black;
}
有什么建议么?
谢谢。
最佳答案
您在float:left
上有li
。删除该行:
#menu li {
display: inline;
background-color: black;
}
由于您不再需要浮点数,因此您也可以摆脱
<br style="clear:both">
,因为它现在只需在菜单下方放置一个空白行即可。这是有关how to properly use float的教程。
浮动通常用于将图像推到一侧或另一侧,而
将段落文字环绕