Question

所以我有点难过。我正在尝试制作一个显示图像的页面。我希望当窗口处于最大宽度（~950 px）时，每行有5个图像以最大量间隔，但我希望它们越接近，因为它使它变得更小然后，当它们之间有0像素时，将会每行只有4个图像，这将持续到特定的宽度。有点像Instagram，但我不希望图片变小。这就是我所拥有的：

HTML

<ul>
   <li>
      <img src="0.png">
   </li>
</ul>
<ul>
   <li>
      <img src="1.png">
   </li>
</ul>
<ul>
   <li>
      <img src="2.png">
   </li>
</ul>

CSS

ul
{
    padding: 0;
    margin: 0;
    list-style-type:  none;
}

ul li
{
    display: inline;
}

//the images are also float left, so they are horizontal

基本上，正如你所看到的，我什么都没有，我真的不知道该怎么做。我很感激任何帮助。谢谢！

Answer 1

你能帮我一个忙吗？试试这个问题（我知道有一个令人讨厌的隐形间距错误与HTML中的换行符上写的li相关，不确定它是否也适用于UL值得一试） -

<ul><li><img src="0.png"></li></ul><ul><li><img src="1.png"></li></ul><ul><li><img src="2.png"></li></ul>

Answer 2

这可能会让你更接近你想去的地方：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
ul {
    padding: 0;
    margin: 0;
    list-style-type:  none;
    min-width:450px;
}
ul li {
    display: inline;
    float:left;
    width:20%;
}
</style>
</head>

<body>
<ul>
  <li> <img src="0.png" width="150" height="50"> </li>
  <li> <img src="1.png" width="150" height="50"> </li>
  <li> <img src="2.png" width="150" height="50"> </li>
  <li> <img src="0.png" width="150" height="50"> </li>
  <li> <img src="1.png" width="150" height="50"> </li>
  <li> <img src="2.png" width="150" height="50"> </li>
</ul>
</body>
</html>

将所有图像放入一个列表是更“正确”的标记，并打开了在ul上设置硬最小宽度的门，但在li上设置了％...这就是使得空白随着空白而变化的原因窗口大小。我不确定这是否会让你一路走来，但希望它会有所帮助！

Answer 3

您的无序列表应如下所示：

<ul><li><img src="0.png"></li><li><img src="1.png"></li><li><img src="2.png"></li></ul>

超级非传统，但它确实有效。

在这里小提琴：http://jsfiddle.net/QMs93/

Answer 4

http://jsfiddle.net/AgLMp/1

<强> CSS

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    max-width: 950px;
    min-width: 600px;
}

ul li {
    float: left;
    width: 33%;
    min-width: 200px;
}

<强> HTML

<ul>
    <li>
        <img src="http://placehold.it/200x200/ff0000/00ffff&text=Image+1" />
    </li>
    <li>
        <img src="http://placehold.it/200x200/00ff00/ff00ff&text=Image+2" />
    </li>
    <li>
        <img src="http://placehold.it/200x200/0000ff/ffff00&text=Image+3" />
    </li>
</ul>

Answer 5

像这样？ http://jsfiddle.net/fqTsN/

顺便删除照片中的float:left！我也解决了这个问题（没有float:left;

，它是水平的

Answer 6

您获得更多控制权的最佳和最快的赌注是使用媒体查询，或者您也可以使用Bootstrap。

Answer 7

正如其他人所说：

<ul>
 <li>Stuff</li>
  <li> Other Stuff</li>
  </ul>

<li>之间的间距</li>

7 个答案: