以 100% 的屏幕宽度显示 li，并允许换行到下一行答案

【问题标题】：Display li's across 100% of screen width, and allow for wrapping to next line以 100% 的屏幕宽度显示 li，并允许换行到下一行
【发布时间】：2013-09-06 06:33:39
【问题描述】：

所以我正在尝试创建一些 HTML/CSS，允许一行 li 元素填充 100% 的页面宽度。每个 li 中的内容是动态的，因此可以是可变宽度（通常是一个或两个单词）。每个 li 部分也需要是内容的宽度，不相等。

我目前正在使用 display:table 和 display:table-cell 来执行此操作，这可以在 jsFiddle 中看到。

ul {
    list-style:none;
    padding:0;
    margin:0;
    display:table;
    width:100%;
    text-align:center;
}

ul li {
    display:table-cell;

}

http://jsfiddle.net/fHL7y/3/

但是，当页面的宽度发生变化时（将栏拖到 jsFiddle 上），项目会聚集并离开屏幕。无论如何使用CSS，li 可以向下流动到下面的下一行，就像它们向左浮动但仍然在屏幕宽度的100% 内间隔开一样？

【问题讨论】：

标签： html css

【解决方案1】：

怎么样

.floatcss li {  
    display: inline-block;
    left: auto;
    right: auto; 
    min-width: 19%;
}

【讨论】：

【解决方案2】：

试试这个

http://jsfiddle.net/fHL7y/4/

.floatcss {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:center;
word-wrap:break-word;/* Added this */
 }

.floatcss li {
float:left;
width:100%; /* Added this */
 }

【讨论】：

【解决方案3】：

它们不能在屏幕宽度的 100% 范围内间隔开，也不能浮动到下一行；您要求 2 个互斥的布局。

如果您希望 li 的间距在屏幕宽度的 100% 以内，直到满足某个页面宽度，您可以使用媒体查询。

ul {
    list-style:none;
    padding:0;
    margin:0;
    display:table;
    width:100%;
    text-align:center;
}

ul li {
    display:table-cell;

}

@media (max-width: 599px) { //Everything in here activates when window is less than 600px
    ul {
        display:block;
    }

    ul li {
        display:block;

    }
}

【讨论】：