试着让图像水平排列

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>