试图让图像水平排列

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>