Question

我想知道是否有办法将ul放在其容器内，而li里面是左对齐的。

#container ul {
    text-align: left;
    list-style:none;
    padding:0;
    margin:0 auto;
}

#container ul li {
    display: inline-block;
}

如果您以li换行到下一行的方式调整屏幕大小，则右侧的空格会显示为列。我们的想法是不要有正确的白色边框。（李将是相同的大小）

如何实现（如果可能）？

这是我想要实现的一个例子。 http://oi58.tinypic.com/2j674ex.jpg

Answer 1

这是您正在寻找的CSS：

#container ul {
    background-color: blue;
    text-align:center;
}

li {
    display: inline-block;
}

https://jsfiddle.net/82dzt0te/6/

Answer 2

使用flex布局：

http://jsfiddle.net/x579701e/

#container ul 
{
    text-align: left;
    list-style:none;
    padding:0;
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
}

#container ul li 
{
    min-width: 150px;
    max-width: 100%;
    height: 150px;
    flex: 1 0 0;
    border: solid 1px red;
}

#container img {width: 100%; height: 100%;}

Answer 3

我相信你想做的是in this DEMO

您需要提供ul width属性。如果你想要调整大小，它应该是％而不是px。然后给它一个0 auto的余量，你已经做过了。

请注意，margin:0 auto如果您没有提供宽度，则无法正常工作。

<强> 更新

try this

Answer 4

尝试使用＆＃34; display：table;＆＃34;在ul。这样您就不必依赖于ul宽度来使内容居中，而li元素将使文本与左侧对齐。像这样：

#nav {

}

#container ul {
    display: table;
    text-align: center;
    list-style:none;
    padding:0;
    margin:0 auto;
}

#container ul li {
    display: inline-block;
    text-align:left;
}

您可以在此处查看演示：

http://jsfiddle.net/kswxs6v1/

容器中心为ul，同时保持li左对齐

4 个答案: