Css <；李>；具有自适应宽度的元素

我想知道是否有可能在没有javascript的情况下在CSS中实现这一点：

N

项的列表，显示为内联、等宽，且所有项的宽度均等于容器的宽度

---

我可以有3个

项目，在这种情况下
宽度将为33%，或者我可以有4个
项目，那么li宽度将为25%。
您可以，但可能性有限。不过，在CSS3中，不能对任意数量的列执行此操作。您可以在CSS4中学习；我还不知道

li {
    display: inline;
}

/* 1 column */
li:first-child:last-child {
    width: 100%;
}

/* 2 columns */
li:first-child:nth-last-child(2),
li:nth-child(2):last-child {
    width: 50%;
}

/* 3 columns */
li:first-child:nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):last-child {
    width: 33.3333%;
}

/* 4 columns */
li:first-child:nth-last-child(4),
li:nth-child(2):nth-last-child(3),
li:nth-child(3):nth-last-child(2),
li:nth-child(4):last-child {
    width: 25%;
}

我希望你能明白。你想这样做吗？我希望不是这样。
可以使用CSS3，如中所示（仅适用于webkit浏览器）。有很多方法可以在Firefox和IE的最新版本中使用。如果您需要一些适用于Opera或IE的旧版本的东西，那么有一个名为JavaScript的库可以使用

有关浏览器支持的信息，请参见

HTML
假设
li
s是从某些服务器端代码生成的，您可以使用以下“技巧”：

//在标记中，根据消息计数向UL添加一个类
制作一个标准的左浮动列表，您可以（或必须）将display设置为inline，以避免IE6将可能存在的左边距加倍

假设您有一个静态页面，您可以如下设置列表：

HTML:

演示了clearfix类的使用
这是使用
display:table
的完美示例。
适用于现代浏览器和IE8+…




css:

html:


福
酒吧
巴兹

是。指定父对象的宽度，并删除
li
@bobek中的所有填充和边距：我想你没有完全理解他的问题。宽度相等，因此每个元素的宽度取决于其同级的数量。//这个解决方案可以工作，但我需要一个跨浏览器的解决方案，使用table cell（）我也可以完美地实现它（除了IE7之外的跨浏览器…）
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

ul {
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack:justify;
    width:200px;
}

li {
    -webkit-box-flex:1;
    border:1px dashed grey;
    text-align:center;
}

// in the markup add a class to the UL based on the count of messages
<ul class="col<%= echo count(lis) %>">
...

// and in the CSS
// (notice you have to use display: inline-block, as inline doesn't allow you to
// specify a width)

li { display: inline-block; }
.col3 li { width: 33.3%; }
.col4 li { width: 25%; }
// etc

<ul class="listLR col3 clearfix">
  <li></li>
  <li></li>
  <li></li>
</ul>

listLR {
  width: 100%; // important for IE!
}

listLR > li {
  display: inline;
  float: left;
}

col3 > li {
  width: 33.33%;
}
col4 > li {
  width: 25%;
} //and so on

ul {
    display: table;
    width: 100%;
    table-layout: fixed; /* optional, for equal spacing */
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    vertical-align: middle; /* or similar, if needed */
}

<ul>
   <li>foo</li>
   <li>bar</li>
   <li>baz</li>
</ul>