水平菜单，具有自动宽度和标签的相同尺寸 [英] horizontal menu with auto width and same dimension of the tabs

问题描述

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

I'd like to create a horizontal menu with auto(100%) width.

我的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;
}

MY 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>

我的问题是，我希望tabs 100％的宽度

My problem is that I would like that the "tabs" (a elements) have the same size maintaining 100% of width

这样做可以吗？我该怎么办呢？感谢

It would be possible to do so? How could I do this? Thanks

推荐答案

以百分比给予li宽度。

Give li width in percentage.

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

这篇关于水平菜单，具有自动宽度和标签的相同尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！