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

尝试这个...并且对于水平使用显示：内联，块是垂直的..内联块是两者。同时删除set img width并让父容器处理它。

 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

试试这个css

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

或

试试这个css

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

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

4 个答案: