使无序列表跨越div宽度的100％ [英] Making an unordered list span 100% the width of a div

问题描述

<div>
  <ul>
    <li>First</l1>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
</div>


div {
  width: 100%;
}
li {
  list-style: none;
  float: left;
}

使用CSS，有没有一种方法可以使LI标签自动填充整个父div的宽度均匀吗？因此，他们每个人都占25％。

With CSS, is there a way to make the LI tags automatically fill the whole width of the parent div, evenly? So they'd each take up 25%.

将宽度指定为25％显然可以，但是我追求的不是解决方案。有问题的菜单是动态创建的，有时会创建和删除新项目。

Specifying 'width' as 25% would obviously work but it's not solution I'm after. The menu in question is dynamically created and new items are created and deleted at times.

欢呼声

推荐答案

我认为您有三个选择：

1. 使用JavaScript计算尺寸

1. Use JavaScript to calculate the sizes

使用表格，如问题（实际上这不是一个坏选择，它是纯HTML和CSS

Use a table, as discussed in this question (this is actually not a bad option — it’s pure HTML and CSS

如果您仅定位新的浏览器，则可以使用CSS的新的柔性盒组件（在此处显示有两个供应商前缀）：

If you’re only targeting new browsers, you can use the new flexible box component of CSS (shown here with a couple of vendor prefixes):

ul{
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
}
li{
    list-style: none;
    list-style:none;
    text-align: center;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

这篇关于使无序列表跨越div宽度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！