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

Question

我希望我的图像水平对齐在同一条线上，无论用户的视口是什么我的 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;
}

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

这是一个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

Answer 2

试试这个...对于水平使用 display:inline，块是垂直的。内联块适用于两者。也去掉设置的img宽度，让父容器处理。

 li {
    display: table-cell;
    position: relative;
}

Answer 3

#image_slider {
   width:1200px; /*set width slider*/
}
#image_slider ul {
    width: 100%;
    display:block;
}
#image_slider ul li {
  display:inline-block;
  float:left;
  width: 25%;
}
#image_slider ul li img {
  width:100%;
}

Answer 4

try this css

#image_slider ul li {
    float: left;
    width: 20%;
}

或

try this css

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

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

Two or more image on the same horizontally line even with resizing the page

html

css