Question

在this示例中，我使用以下样式：

ul.menu li {
    float:left;
    padding: 17px 35px 0px 35px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
    font-weight:bold; 
    height:20px;
    background: url("sep2.png") no-repeat;
}

菜单未对齐。它应该平等对齐（沿着整个导航栏）。我该怎么做？

Answer 1

整个菜单都有固定的宽度。

你有6个菜单项（li）。

除以6将每个li设置为相同的宽度

Answer 2

尝试添加display：block;使li元素块级元素。我就是这样做的。

Answer 3

您可以删除填充，居中对齐每个li的文本并添加固定宽度。

试试这个：

ul.menu li {
  float:left;
  padding-top: 0;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold; 
  height:20px;
  text-align: center;
  width: 142px;
  background: url("sep2.png") no-repeat;
}

如果您想要<a>标记的较大点击区域，请将宽度/文字对齐方式放在其上，并将其设为display: block。

Answer 4

您当前的设计不考虑具有不同长度的菜单项名称，因为您当前的项目名称都是相同的，您没有看到这一点，也只有导航中的文本是可点击的。我建议这样做：

摆脱<li>。
将text-align:center属性添加到<li>。
在<a>添加width:142px（大约）。

这使您可以点击整个块。

如何在导航菜单中对齐列表项？

4 个答案: