Html CSS:Make all<；李>；列表的宽度相同，并占用100%的可用空间

我试图使水平导航菜单占用父元素的所有可用宽度

我尝试过使用display:table和display:table单元格，但没有成功

其他方法，例如使用溢出和width:auto也不起作用

---

该列表由Joomla通过菜单模块创建

html

在过去的几天里，我已经尝试了很多方法。。。 然而，在互联网上发现的一切都不起作用

我不知道Joomla添加的类是做什么的，也不知道它们在哪里

导航栏如下所示： 当鼠标位于按钮上方时：

---

我如何才能获得它，以便列表在大小相同时占用所有可用空间？

我认为您应该尝试使用

display: table

再次（对于

nav

元素）和

display:table row

对于

ul

，以及

display:table cell

对于

li

如果您有任何问题，请写信，但此方法应能起作用。 不要害怕

display:table

，它不是一个旧的table元素，而是一个利用validate和semantichtml进行良好布局的好技巧。希望能有帮助

更新

---

相同的工作解决方案：

如果项目之间的宽度相等对您很重要，您可以将项目向左浮动，并为其设置相等的宽度（这在您知道有多少个项目时有效。或者，如果菜单项的数量可变，您可以使用js确定宽度）：

这是一把小提琴：

已更新以使

cf

（clearfix）以您的元素为目标：

如果要使用

display:table

方法，请记住在

元素上使用

display:table cell

。另外，如果要使它们垂直居中，请使用

垂直对齐：中间

。（请注意，

表格

和

表格单元格

CSS属性在IE7及以下版本中不起作用）

下面是第二种方法（

table

）：

div{边框：1px实心红色；宽度：400px；高度：400px；}
ul{宽度：100%；高度：50px；列表样式：无；边距：0；填充：0；文本对齐：居中；}
li{背景色：绿色；颜色：白色；宽度：1%；位置：相对；显示：表格单元格；边框：实心1px白色；}

第1单元
第2单元
第三单元
第4单元

导航菜单导航丸

是引导中使用的类，因此引导可能会覆盖宽度。你能提供一个链接到你的网站，这样我就可以用Firebug检查它了吗？（）什么时候加载或使用引导程序？它们可以被覆盖吗？好的，只是看了一下，菜单已经占据了黑框的全部宽度，但是它正与中心对齐，因为您使用的是

text align:center只是附带说明一下，这在IE7中是行不通的（这不是任何人都应该关心的）：）坦克的答案。不过，正如问题中所说，我已经试过了。容器的宽度设置为960px。我已经用链接更新了我的帖子。对IE7感到抱歉。在某个地方，我看到了一个脚本，它可以在IE7上运行：）。但我们不应该在意。谢谢你的详细回答。但是如何将cf类添加到
标记中？这个列表是由Joomla提供的，所以我不知道如何为html中尚未包含的元素预设类。您可以修改cf类以针对指定的元素。见我的最新答案谢谢！稍后我将全面阅读代码以理解它（非常忙）。它做了我想要的，看起来很棒。非常感谢，不客气。您可以在此处阅读有关clearfix的更多信息：
<div id="DivN">
  <ul class="nav menu nav-pills">

    <li class="item-101 current active">
      <a href="/site/">Home</a>
    </li>

    <li class="item-113">
      <a href="/site/index.php?Itemid=113">School Info</a>
    </li>

    <li class="item-114">
      <a href="/site/index.php?Itemid=114">Achievements</a>
    </li>

    <li class="item-115">
      <a href="/site/index.php?Itemid=115">News &amp; Events</a>
    </li>

    <li class="item-116">
      <a href="/site/index.php?Itemid=116">Parents &amp; Carers</a>
    </li>

    <li class="item-117">
      <a href="/site/index.php?Itemid=117">Community</a>
    </li>

    <li class="item-118">
      <a href="/site/index.php?Itemid=118">Contact Us</a>
    </li>

  </ul>
</div> 

#DivN{
    width:100%;
    height:42px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    text-decoration:none;
    background-color:black;
    text-align:center;
    font-size:13px;
    font-weight:700;
}

#DivN ul{
    list-style:none;
    width:100%;
}

#DivN ul li{
    display:inline-block;
    /*float:left;*/
    line-height:22px;
    height:32px;
    list-style-type:none;
    margin:4px;
    overflow:hidden;
    width:auto;
}

display: table

#DivN{
    width:100%;
    height:42px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    text-decoration:none;
    background-color:black;
    text-align:center;
    font-size:13px;
    font-weight:700;
}

#DivN ul{
    list-style:none;
    width:100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#DivN ul li{
    float:left;
    line-height:37px;
    height:100%;
    list-style-type:none;
    margin:0;
    overflow:hidden;
    width: 14.28571428571429%;
    cursor: pointer;
}
#DivN ul li:hover{
    background-color: gray;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
#DivN ul:before,
#DivN ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

#DivN ul:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
#DivN ul {
    *zoom: 1;
}

<style>
   div { border:1px solid red; width:400px; height:400px; }
   ul { width:100%; height:50px; list-style: none; margin:0; padding:0; text-align: center; }
   li { background-color:green; color:White; width:1%; position:relative; display:table-cell; border:solid 1px white; }
</style>

<div>
   <ul>
      <li>CELL 1</li>
      <li>CELL 2</li>
      <li>CELL 3</li>
      <li>CELL 4</li>
   </ul>
</div>