如何完美地将内容置于无序列表中？

我有一个无序的项目列表，我想使内容完美集中在页面上，而不管断点/屏幕尺寸是什么。我事先不知道会有多少物品。有谁知道我可以用CSS来完成这个任务吗？我知道这可以用JavaScript来完成，但如果可能的话，我更喜欢只使用CSS。如何完美地将内容置于无序列表中？

截图：

链接： http://jsfiddle.net/wrf39qev/1/

<ul> 
    <li><img src="http://lorempixel.com/230/265/city/1"></li> 
    <li><img src="http://lorempixel.com/230/265/city/2"></li> 
    <li><img src="http://lorempixel.com/230/265/city/3"></li> 
    <li><img src="http://lorempixel.com/230/265/city/4"></li> 
    <li><img src="http://lorempixel.com/230/265/city/5"></li> 
    <li><img src="http://lorempixel.com/230/265/city/6"></li> 
    <li><img src="http://lorempixel.com/230/265/city/7"></li> 
    <li><img src="http://lorempixel.com/230/265/city/8"></li> 
    <li><img src="http://lorempixel.com/230/265/city/9"></li> 
    <li><img src="http://lorempixel.com/230/265/city/10"></li> 
</ul>

来源

2015-10-12 Gabe

好的。我会在有一个时。 – Gabe

像这样的事情？ ul带有默认填充和边距，您需要专门删除它。

编辑

设置一个宽度与UL，加入余量：汽车和浮动的元素到左侧。这有帮助吗？

编辑：2

设置显示块图像和设定宽度：100％，高度汽车;

编辑：3

可以添加的33％的宽度的立（一个或多个），以确保该间隙是在任一侧上相同。但是，如果您希望差距相同，并且您希望尽可能多地安装图像，则必须在断点处使用媒体查询。意思是说，你需要写下类似的话：“从这个宽度到这个宽度，我需要一列中的5个图像（20％）”等等。这是唯一的方法。

这会将内容移动到中心并左对齐项目。

ul { list-style-type: none;margin:0;padding:0; width:90%; display:block;margin: auto;} 
 
li { 
 
    display: block; 
 
    float:left; 
 
    padding: 10px; 
 
    width:50%; 
 
    box-sizing:border-box; 
 
} 
 

 

 
img{ 
 
    display:block; 
 
    width:100%; 
 
    height:auto; 
 
    } 
 

 

 
@media only screen and (max-width:1200px){ 
 
    li{ 
 
     width:25%; 
 
     } 
 
    } 
 

 

 
@media only screen and (max-width:900px){ 
 
    li{ 
 
     width:33% 
 
     } 
 
    }

<ul> 
 
    <li><img src="http://lorempixel.com/230/265/city/1"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/2"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/3"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/4"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/5"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/6"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/7"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/8"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/9"></li> 
 
    <li><img src="http://lorempixel.com/230/265/city/10"></li> 
 

 
</ul>

来源

2015-10-12 01:24:51

这是一个好的开始，但我只想将具有全部项目的行置于中间。如果最后一行没有填满，是否可以左对齐内容？例如，如果您查看以下截图，则最后一行中的项目与倒数第二行的第二项对齐。我希望它与第一项相符。屏幕截图： http://imgur.com/uoU5veF – Gabe

谢谢，但不幸的是，这是行不通的。通过设置li的宽度为33.33％，它将确保最多每行3个项目。我希望每条线在去下一行之前尽可能多地安装图像。 – Gabe

是的，删除了33％的宽度条件。现在好吗？ –

您需要设置uL至100％的宽度和无余量和使用块li元素，否则你会得到多个列：

ul { list-style-type: none; width: 100%; text-align:center; margin:0; padding:0;} 
li { 
    display: block; 
    margin: 10px; 
}

来源

2015-10-12 01:29:40 bitfiddler

在当怀疑，当涉及到图像时，汽车边距通常会修复大多数居中问题

li { 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto 
}

或者只是

li { 
    display: inline-block; 
    margin: auto; 
}

来源

2015-10-12 01:29:55

你只需要在你的<ul>添加text-align: center。

JsFiddle

来源

2015-10-13 08:44:26

如何完美地将内容置于无序列表中？

回答

相关问题