css - 具有自动宽度和标签尺寸相同的水平菜单

Question

我想创建一个具有自动（100%）宽度的水平菜单。

我的 CSS

.horizontal {
  width: 100%;
}

.horizontal ul {
  display: table;
  width: 100%
}

.horizontal li {
  display: table-cell;
}

.horizontal li a {
  height: 30px;
  display: block;
  border: 1px solid #aaa;
  text-align: center;
  padding: 4px;
  margin: 0 2px;
  background: #ccc;
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px;
}

我的 HTML

<div class="horizontal">
<ul>
    <li><a href="#">Long Item</a></li>
    <li><a href="#">Short Item</a></li>
    <li><a href="#">Really Long Item</a></li>
    <li><a href="#">Nav Item</a></li>
    <li><a href="#">Some Other Link</a></li>
</ul>
</div>

我的问题是我希望“标签”（一个元素）具有相同的大小，保持 100% 的宽度

有可能这样做吗？我怎么能这样做？谢谢

Answer 1

以百分比给出 li 宽度。

.horizontal li {
  display: table-cell;
  width:20%; // because you have 5 anchors.
}

Answer 2

你可以通过简单地添加这样的东西来做到这一点：

li{width:400px;}

如果您li在页面上有或将有更多的，您可以给他们一个类，给ul一个类并使用：

ul.header > li{width:400px;}

或者只是使用：

.horizontal > ul > li{width:400px;}

Answer 3

不确定您是否正在搜索以下内容，但您可以尝试以下内容：

.horizontal ul {
  height: 40px;
  padding: 0 100px;
  font-weight: 500;
  line-height: 40px;
  text-transform: uppercase;
  text-align: justify;
  background: #222;
}

.horizontal ul li{
  display: inline-block;
}

.navigation ul li a {
  text-decoration: none;
  color: #fff;
}