Question

我想做的事

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

问题：

我将<div>的宽度设置为400px，以便它适合一个图像，因为我希望它在网站中间居中（我使用margin：0 auto;为此）。我现在无法将li元素排在div之外的右边，它们只是在它下面出现（见图）。

所以..

有没有办法让我的所有<li>元素从左到右并排放置，而不会增加<div>的大小？或者也许我可以通过其他方式居中并增加<div>的宽度......但是我无法使用overflow：hidden来隐藏<li>元素，然后才能使用jquery进入屏幕

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;
}

图片例如（忽略灰色条，这只是页脚的占位符）

Broken li elements

编辑：值得注意的是我试过漂浮李的左边，但他们仍然在下面，大概是因为他们不适合包含div。

Answer 1

将ul绝对定位在div中。然后将display：inline-block添加到images / lists。添加位置：相对于你的div和溢出：隐藏

您可能想稍微更改.slides的宽度。您可以使用jquery以不同的方式绝对定位ul并使其滑动

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

编辑：改变宽度：... px到white-space：nowrap;按照IMI的建议

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

Answer 2

只需使用Flexbox？然后，您可以在flexbox或其容器（或String number = "20.00-"; boolean negative = false; if(number.substring(number.length() - 1).equals("-")) { number = number.substring(0, number.length() - 1); negative = true; } double parsedNumber = Double.parseDouble(number); if(negative) { parsedNumber *= -1; }偶数）上使用margin-left以使其滚动。

transform:translateX

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

Some prefixing required depending on target browsers

Answer 3

您可以在父容器上使用white-space: nowrap;以避免换行。设置overflow: hidden以避免看到额外的元素。

删除overflow属性以检查它是如何对齐的。

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

Answer 4

您可以使用li {display：inline;}来并排获取它。

http://jsfiddle.net/18yao91v/262/

li{
     display: inline;
}

Answer 5

您需要将li元素显示为块并向左浮动它们，因此它们将水平列出。

#slider li{
  display:block;
  float: left
}

已完成此操作，您需要隐藏除第一个元素之外的其他li元素。（您可以通过向第一个元素添加不同的类来完成此操作）。使用jquery，您可以在li元素之间切换该类，并添加一些动画。

我是否可以在不增加包含div的大小的情况下并排获得<li>？

5 个答案: