我想居中对齐菜单,我尝试使用文本对齐,但仍然没有结果

以下是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的教程。


  浮动通常用于将图像推到一侧或另一侧,而
  将段落文字环绕

09-10 10:50
查看更多