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

我想创建一个自动（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>

我的问题是，我希望“选项卡”（a元素）具有相同的大小，保持100%的宽度

---

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

您只需添加以下内容即可：

li{宽度：400px；}

如果页面上有或将有更多的

li

，您可以给他们一个类，给

ul

一个类并使用：

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

或者直接使用：

---

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

只需添加如下内容即可：

li{宽度：400px；}

如果页面上有或将有更多的

li

，您可以给他们一个类，给

ul

一个类并使用：

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

或者直接使用：

---

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

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

.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;
}

---

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

.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;
}

---

以百分比表示li宽度

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

---

以百分比表示li宽度

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

---

您希望这些元素跨越父元素的整个宽度还是每个元素都是固定宽度？您希望这些元素跨越父元素的整个宽度还是每个元素都是固定宽度？