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

Question

所以我正在尝试创建一些 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% 内隔开一样？

Answer 1

尝试这个

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

Answer 2

它们不能在屏幕宽度的 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;

    }
}

Answer 3

怎么样

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