0

我想居中对齐菜单，我尝试使用 text-align 但仍然没有结果

以下是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;
}

有什么建议么？

谢谢你。

4

3 回答 3

2

你float:left在li. 把这条线拿出来：

#menu li {
  display: inline;
  background-color: black;
}

由于您不再需要浮动，您也可以摆脱它，<br style="clear:both">因为它现在只会在菜单下方放置一个空行。

这是有关如何正确使用 float的教程。

浮动通常用于将图像推到一侧或另一侧，同时让段落的文本环绕它

于 2012-09-09T19:35:02.560 回答
0

我相信您正在尝试使用 text-align:center 将 #menu 标记的内容居中。这行不通，因为你里面有'ul'。我要做的是从 #menu 标记中删除 text-align:center 。

然后在“#menu ul”标签中添加：

margin: 0 auto; /* this will center the UL, but needs to be used with a width set */
width: 500px; /* change this to the width you desire */

为了使块级元素在页面上居中，您需要提供一个小于嵌套它的父元素宽度的宽度，然后将左侧和右侧的边距设置为自动。

于 2012-09-09T19:46:12.343 回答
0

放

 #menu ul{
   text-align:center;
 }

然后设置

#menu li{
  margin:0px auto;
}

这会将顶部和底部边距保留为 0px，但会自动检测左右边距并使它们相等并居中。

另外，删除

float:left;

从

#menu li
于 2012-09-09T19:39:42.293 回答