我可以在不增加包含div的大小的情况下并行获得<li>的值吗？

Question

我想做什么，

因此，我有一个<div>，在这个<div>中是一个由<li>填充的<ul>，每个<ul>都包含一个<img>。我希望这些图像并排排列，这样我就可以编写一些jquery，使它们向左滑动，并使其看起来像图像提词器。

问题：

我将<div>的宽度设置为400 to，这样它就适合于一个图像，因为我希望它在网站中间居中(我使用了页边距:0 auto；为此)。我现在不能让li元素在div的右边排列，它们就在它下面(见图)。

所以.

有没有一种方法可以让我的所有<li>元素在不增加<div>大小的情况下左右并排地坐着？或者我可以用其他方式对它进行居中，并增加<div>的宽度.但是那样的话，我就无法使用溢出:隐藏起来，在<li>元素出现在屏幕上之前隐藏它们。

HTML

   <div id="slider">
        <ul class = "slides">
            <li class="slide" id="1"><img src="images/Coding.png"></li>
            <li class="slide" id="2"><img src="images/Javascript.png"></li>
            <li class="slide" id="3"><img src="images/League_of_legends.png"></li>
            <li class="slide" id="4"><img src="images/Coding.png"></li>
        </ul>
    </div>

CSS

#slider{
    width:400px;
    height:400px;
    margin: 0 auto;
    border-style:solid;
    border-color:#000;
    border-width:1px;
}
.slides{
    list-style-type: none;
    padding:0px;
    margin:0px;
}
.slide{
    list-style-type: none;
}

.slide img{
    width:400px;
    height:400px;
}

例如，图像(忽略灰色栏，这只是页脚的占位符)

​

​

编辑:值得注意的是，我试着将李的左边浮动，但它们仍然在下面，大概是因为它们不适合包含的div。

Answer 1

将您的ul绝对定位在div中。然后将显示:内联块添加到图像/列表中。添加位置:相对于您的div和溢出:隐藏

您可能希望稍微更改一下.slides的宽度。您可以使用jquery以不同的方式对ul进行绝对定位，并让它滑动。

#slider{
   position:relative;
   overflow:hidden;
}
.slides{
    position:absolute;
    white-space: nowrap;
}
.slide,.slide img{
    display:inline-block;
}

编辑:将width:...px更改为空白: nowrap；正如IMI所建议的那样

http://jsfiddle.net/nLb8ptmy/1/

Answer 2

就用Flexbox？然后，您可以在柔性盒或其容器(甚至是margin-left )上使用transform:translateX使其滚动)。

​

#slider > ul {
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  list-style:none;
}

<div id="slider">
        <ul class = "slides">
            <li class="slide" id="1"><img src="images/Coding.png"></li>
            <li class="slide" id="2"><img src="images/Javascript.png"></li>
            <li class="slide" id="3"><img src="images/League_of_legends.png"></li>
            <li class="slide" id="4"><img src="images/Coding.png"></li>
        </ul>
</div>

​

某些前缀取决于目标浏览器。

Answer 3

您可以在父容器上使用white-space: nowrap;来避免包装。设置overflow: hidden以避免要查看的额外元素。

删除溢出属性以检查其对齐方式。

​

#slider {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border-style: solid;
  border-color: #000;
  border-width: 1px;
  overflow: hidden; /* Avoiding other elements to be visible */
}
.slides {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  white-space: nowrap; /* Do not wrap to next line */
}
.slide {
  list-style-type: none;
}
.slide img {
  width: 400px;
  height: 400px;
}

<div id="slider">
  <ul class="slides">
    <li class="slide" id="1">
      <img src="http://placehold.it/400x400">
    </li>
    <li class="slide" id="2">
      <img src="http://placehold.it/400x400">
    </li>
    <li class="slide" id="3">
      <img src="http://placehold.it/400x400">
    </li>
    <li class="slide" id="4">
      <img src="http://placehold.it/400x400">
    </li>
  </ul>
</div>

​