html - 即使调整页面大小，同一水平线上的两个或多个图像

Question

我希望我的图像在同一行上水平对齐，无论用户的视口(viewport)是什么我的 html 是:

  <div id="image_slider">
    <ul>
      <li><img src="img/1.jpg" id="1"/></li>
      <li><img src="img/2.jpg" id="2"/></li>
      <li><img src="img/3.jpg" id="3"/></li>
    </ul>
  </div>

在第一次尝试

中，我试图将它们对齐:

img{
  width:1200px;
  float:left;
  padding:0px;
  margin:0px;
}

#image_slider ul,#image_slider li ,#image_slider,#container{
  display:block;
}

而在其他尝试

#image_slider ul,#image_slider li ,#image_slider,#container{
  display:inline-block;
}

我更改为内联 block ，但将浏览器调整为较小的视口(viewport)时图像仍然不符合预期

这是一个Jsfiddle

Answer 1

可以使用display:inline-block，也可以添加white-space:nowrap:

#image_slider ul, #image_slider li, #image_slider, #container {
    display:inline-block;
    white-space:nowrap;
}

jsFiddle example