<li> 之间的间距 [重复]答案

【问题标题】：Spacing between <li>'s [duplicate]<li> 之间的间距 [重复]
【发布时间】：2013-10-18 19:55:08
【问题描述】：

所以我有点难过。我正在尝试制作一个页面来显示图像。当窗口处于最大宽度（~950 px）时，我希望每行有 5 个最大数量的图像，但我希望它们在你缩小它时变得更近，然后，当它们之间有 0 px 时，会有每行只有 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

基本上，如您所见，我一无所有，也不知道该怎么办。我会很感激任何帮助。谢谢！

【问题讨论】：

你不能在图片<li>s 上加一个min-width 吗？
是否允许带有的答案？

@JimW No. No. No. stackoverflow.com/questions/83073/…

删除<li>元素之间的空格。

@iambriansreed 但是图像可以是数据，也可以是图像数据表，不是吗？

标签： html css

【解决方案1】：

你能帮我一个忙并尝试这个修复吗（我知道在 HTML 的换行符上写了一个与lis 相关的令人讨厌的不可见间距错误，不确定它是否也适用于 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>

【讨论】：

【解决方案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 上设置 % 的大门......这就是使空白随窗口大小。我不确定这是否能让你一路走好，但希望它会有所帮助！

【讨论】：

它们相互重叠。但我确实喜欢展开页面时它的伸展方式。
^他们怎么说：jsfiddle.net/T7ryt

【解决方案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/

【讨论】：

我没有这样做，编辑我帖子的人做到了。我按照你写的方式做了。
哦，好吧，用小提琴看看我编辑的回复。应该有帮助！

【解决方案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>

【讨论】：

随着宽度变窄，似乎没有做他的事情减少一列。
哇真的很接近。虽然如果我把它缩小到每行有 2 个盒子，我希望它们也能分散开来。你知道怎么做吗？
喜欢这个？ jsfiddle.net/AgLMp/2
@Mr.Polywhirl 不，所以当我缩小窗口时，只有 3 个框。但我希望它们一直彼此隔开。你第一次看到的很好，虽然当我把屏幕缩小时，会有 2 张图像，但我希望它们像最初的 3 张一样彼此间隔。

【解决方案5】：

喜欢这样吗？ http://jsfiddle.net/fqTsN/

顺便从你的照片中删除float:left！我也解决了这个问题（它是水平的，没有float:left;

【讨论】：

【解决方案6】：

您最好和最快的选择是使用媒体查询，或者您也可以使用 Bootstrap。

【讨论】：

【解决方案7】：

正如其他人所说：

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

【讨论】：