Question

我无法为我的生活获得一组水平排列在屏幕上的图像。

#full_image {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

#full_image ul li img {
  display: inline;
  margin: 0 auto;
  width: 100%;
  max-width: 100%
}

<div id="full_image">
  <ul>
    <li>
      <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
    </li>
  </ul>

</div>

Answer 1

您正在为每个图片创建一个新列表，对于初学者;每个列表都是块级（非内联）元素。默认情况下，块元素从新行开始。

然后，您的display: inline将应用于图片，而不是应用于包含它们的li，这仍然是块级别。

最后，list-style: none对div没有意义。我假设你的意思是将它应用于列表。

所以：

#full_image {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

#full_image li {
  display: inline;
}

#full_image li img {
  margin: 0 auto;
  max-width: 100%
}

<ul id="full_image">
  <li>
    <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
  </li>
  <li>
    <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
  </li>
  <li>
    <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>
  </li>
</ul>

Answer 2

删除标签ul li并重试

Answer 3

删除列表标签

http://jsfiddle.net/cxfNb/他们排队很好。如果你想要子弹点，你将不得不删除ul和li标签的块样式

<div id="full_image"> 
  <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>   
  <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>  
  <a href="#"> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></a>  
</div>

试图让图像水平排列

3 个答案: