Question

我有一个 div 容器和一个 ul 。我希望 div 扩展到其内容 ul 。我已经尝试了所有我发现的东西（溢出：隐藏，clearfix等......），但没有任何效果。

更新：最初这是一个具有交叉渐变效果的滑块，其中图像彼此重叠。因此，导致图像位于列中的解决方案（相同的左侧，但顶部值不同）对我来说并不好。请给我看一下没有JS的纯HTML / CSS解决方案。

.slider {
  position: relative;
  padding: 0;
  margin: 0 auto;
  border: 1px solid black;
}

.slider img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  position: absolute;
}

<div class="slider" style="max-width: 880px;">
  <ul>
    <li><img src="https://placeimg.com/400/200/any" style="width:100%"></li>
    <li><img src="https://placeimg.com/400/200/tech" style="width:100%"></li>
    <li><img src="https://placeimg.com/400/200/animals" style="width:100%"></li>
  </ul>
</div>

Answer 1

从CSS中删除以下代码行：

li {
    position: absolute;
}

如果您希望内容（图像）显示在一行，请使用以下代码：

li {
    display:inline-block;
}

Answer 2

使用以下css：

.slider {
  width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid black;
}

ul {
   list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
}

li {
    width: 20%;
    float: left;
    position: relative;
}

要创建纯CSS滑块，请检查以下内容： http://www.blogohblog.com/cool-slider-css3-html/

将DIV扩展为其UL内容

2 个答案: