Question

我想中心对齐菜单，我尝试使用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;
}

有什么建议吗？

谢谢。

Answer 1

float:left上有li。拿出那条线：

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

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

这是关于how to properly use float的教程。

浮动通常用于将图像推向一侧或另一侧，而让段落的文字环绕它

Answer 2

集

 #menu ul{
   text-align:center;
 }

然后设置

#menu li{
  margin:0px auto;
}

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

另外，删除

float:left;

这

#menu li

Answer 3

我相信您正在尝试使用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 */

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

对齐ul标签中的中心菜单选项

3 个答案: