< li>元素具有适当的宽度 [英] <li> elements with adapted width

问题描述

我想知道是否可以在CSS中这样做，没有javascript：

I'm wondering if it is possible to do this in CSS, without javascript:

N < li> / code>项目，其中显示内联，宽度等于和所有的宽度等于容器的宽度

A list of N <li> items, with display inline, equal width, and the width of the all equal to the width of the container

我可以有3 < li> 项目，在这种情况下，< li> 宽度将为33％，或者我可以有4 <$

I can have 3 <li> items, in this case the <li> width will be 33%, or I can have 4 <li> items, then the li width will be 25%.

推荐答案

归功于 CSS3灵活

Credit to The CSS3 Flexible Box Layout (flexbox) for the information on the browser support.

<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

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

这篇关于&lt; li&gt;元素具有适当的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！