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

在100％的屏幕宽度上显示li，并允许换行到下一行

3 个答案: