1

我的网站上有一个<ul>包含一些子菜单的列表。它的结构是这样的：

<div id="cssmenu">
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>RNG</span></a>
      <ul>
         <li><a href='#'><span>menu 1</span></a></li>
         <li><a href='#'><span>menu 1</span></a></li>
         <li class='last'><a href='#'><span>menu 1</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Altro</span></a>
      <ul>
         <li><a href='#'><span>kldajofa</span></a></li>
         <li class='last'><a href='#'><span>Altro12</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

<li>如您所见，我有 4 个，我希望它们与屏幕宽度居中对齐，但我不知道该怎么做。

你可以在这里看到一个包含 CSS的小提琴。如何将菜单上的名称居中对齐？

在此处输入图像描述

4

4 回答 4

2

假设只有 4 个li- 如示例所示， set width:25%。

在这里工作 jsFiddle

#cssmenu li {
    float: left;
    padding: 0px;
    width: 25%;
}

在此处输入图像描述

我做了一个小更新，这样子导航菜单项也是 25%..

jsFiddle在这里

有设置为width:225px;。

#cssmenu li ul {
    width: 25%;
}
于 2013-10-05T18:56:19.677 回答
1

考虑到您只有 4 个菜单项，您只需要添加：

#cssmenu > ul > li { width:25%; }

这会将列表项的宽度设置为 25%。并且由于a被设置为显示为块，它们将适合li.

请注意，我们使用的是直接子选择器>，因为我们不希望将这种效果应用于li子菜单内的菜单。我们只需要根级别的效果。

其他可能的解决方案是使用flexbox尚未得到很好支持且不能在没有 polyfill 的情况下使用。

于 2013-10-05T18:55:54.770 回答
1

如果 li 是display:inline-block您可以申请text-align:center的，ul并且列表项将居中，而不管数量多少（前提是在线上有空间）。

好消息是没有清算问题。

JSFiddle

于 2013-10-05T19:11:27.567 回答
-1

我刚刚为 li 添加了宽度，它现在可以工作了。

检查JsFiddle

#cssmenu li a {
  background: #0D0D0D bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
    width:70px;
}
于 2013-10-05T18:56:22.853 回答