Question

我想知道是否可以在CSS中执行此操作，而不使用javascript：

N <li>个项目列表，显示内联，宽度相等，全部宽度等于容器宽度

我可以有3个<li>项，在这种情况下，<li>宽度为33％，或者我可以有4个<li>项，那么li宽度将为25％。

Answer 1

这是使用 display: table 的完美示例。适用于现代浏览器和IE8 + ...
Support chart
JSFiddle

的CSS：

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 */
}

HTML：

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

Answer 2

可以使用CSS3 flex boxes，如this fiddle中所示（仅适用于webkit浏览器）。有other browser custom properties可以使这适用于最新版本的Firefox和IE。如果您需要适用于Opera或旧版IE的东西，那么有一个名为Flexie的JavaScript库可能会有效。

感谢The CSS3 Flexible Box Layout (flexbox)获取有关浏览器支持的信息。

HTML

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

CSS

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

Answer 3

你可以，有限的可能性。但是，在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%;
}

我希望你明白这个主意。你想这样做吗？我希望不会。

Answer 4

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

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

Answer 5

制作一个标准的左浮动列表，您可以（或必须）将显示设置为内联，以避免IE6将可能存在的边距加倍。

假设您有一个静态页面，您可以像这样设置列表：

HTML：

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

和CSS：

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

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

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

演示了使用clearfix-class here

<li>宽度适应的元素</li>

5 个答案:

HTML

CSS