在包含多个元素的列表项上使用填充

Question

所以我有一个 HTML 列表，其中每个列表项都有一个图像，上面有一个 header 标题，图像后面有一个在悬停时转换的框。我快要让它按我想要的方式显示了，但列表项似乎 co-operate 不像它们应有的那样。我试图让方框直接位于图像后面，文本位于方框上方的中央，但目前它们略微未对齐。这是一个展示列表的 JSFiddle JSFiddle。

列表项之一的示例如下所示：

        <li>
            <a href = ""  class="linkChange">
                <h6 class ="headings">Appointment App</h6>
                <img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
                <span class="box rotate" id = "box"></span>
            </a>
        </li>

css在JSFiddle中有详细说明。我是 Web Dev 的新手，所以如果 CSS 中的某些部分是多余的，请原谅我。

Answer 1

不要在 <img> 标签后使用 <span>，而是将图像放在 <div> 中并将背景应用于 div。同时删除 .imgs 和 .box 上的 position: absolute;。

<div class="box rotate" id = "box">
    <img class="imgs" id="imgs" src = "https://img.icons8.com/clouds/2x/calendar.png"/>
</div>

Answer 2

我认为您的 CSS 太多了，很多样式都是多余的，或者被其他样式覆盖了。但我不想过分关注这一点，因为这不是代码审查，而是解决方案。我做了 trim 去掉不必要的样式。

这是我更改的内容：

将 h6 移到 link 之外，因为用户可能会点击图像的大目标区域，而不是标题文本。
已将 display: flex 添加到您的锚点并将其内容对齐到中心。
我在 h6 上设置了 white-space: nowrap，这样它在方框上方看起来更干净。这是结果。

.appsList {
  list-style: none;
  display: flex;
  margin: 0 auto;
}

.appsList li {
  position: relative;
  padding: 100px;
}

.appsList .headings {
  color: purple;
  white-space: nowrap;
  margin: 0 0 .75rem;
  font-size: 1.2rem;
}

.linkChange {
  display: flex;
  justify-content: center;
}

.imgs {
  position: absolute;
  z-index: 1;
  display: inline-block;
}

.box {
  position: absolute;
  background: #5FCF80;
  width: 200px;
  height: 200px;
  z-index: -1;
}


/* Box comes immediately after imgs, so it can be selected to transform on hover with imgs */

#imgs:hover+#box {
  transform: rotate(360deg);
  background: #9351A6;
  border-radius: 50%;
  transition: all 1s ease-in-out;
  z-index: -1;
}

.box:hover {
  transform: rotate(360deg);
  background: #9351A6;
  border-radius: 50%;
  z-index: -1;
}

.rotate {
  transition: all 0.5s ease-in-out;
}

.rotate:hover {
  transition: all 1s ease-in-out;
}

<ul class="appsList">
  <li>
    <h6 class="headings">Appointment App</h6>
    <a href="" class="linkChange">
      <img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/calendar.png" />
      <span class="box rotate" id="box"></span>
    </a>
  </li>

  <li>
    <h6 class="headings">Second App</h6>
    <a href="" class="linkChange">
      <img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/brain.png" />
      <span class="box rotate" id="box"></span>
    </a>
  </li>


  <li>
    <h6 class="headings">Banking App</h6>
    <a href="" class="linkChange">
      <img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/bank-building.png" />
      <span class="box rotate" id="box"></span>
    </a>
  </li>

  <li>
    <h6 class="headings">Reimburement App</h6>
    <a href="" class="linkChange">
      <img class="imgs" id="imgs" src="https://img.icons8.com/clouds/2x/cash-in-hand.png" />
      <span class="box rotate" id="box"></span>
    </a>
  </li>

</ul>

jsFiddle

在包含多个元素的列表项上使用填充

using padding on list items with multiple elements inside them

css

html-lists

padding

listitem