2

我一辈子都无法在屏幕上水平排列一组图像。

#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>

4

3 回答 3

7

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

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

最后，list-style: none在 a 上没有意义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>

于 2013-09-04T21:38:52.707 回答
1

删除标签 ul li 并重试

于 2013-09-04T21:38:11.673 回答
0

删除列表标签

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>
于 2013-09-04T21:39:25.000 回答