html - 清除 li 元素中的 float 问题

Question

尝试在 HTML 和 CSS 中重现以下内容:

以下是我尝试构建它的方式:

.layout ul > li {
  list-style: none;
}

.layout ul > li:nth-child(1n) > img {
    float: left;
}

.layout ul > li:nth-child(2n) > img {
    float: right;
    z-index: 9999;
}

<div class="layout">
  <ul>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
  </ul>
</div>

问题是在应用 clearfix 时它根本没有帮助。这些图像似乎排成一排。也许在 li 元素和 clearfix 方面有什么特别之处？如何解决？

Answer 1

您可以简单地考虑 text-align 属性和重叠的一些负边距(这将避免所有 float 问题)

.layout {
  width: 200px;
}

.layout ul {
  margin: 0;
  padding: 0;
}

.layout ul>li {
  list-style: none;
  margin-bottom: -20px;
  position: relative; /* don't forget this to be able to use z-index */
}

.layout ul>li {
  text-align: left;
}

.layout ul>li:nth-child(2n) {
  text-align: right;
  z-index: 999; 
}

<div class="layout">
  <ul>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
    <li><img src="http://placeimg.com/120/80/grayscale" /></li>
  </ul>
</div>