html - 列表项 div 不会达到父项的 100% 宽度

Question

我正在尝试在图像上添加文本，我有一个list-item包含图像和 div 文本块的文本块，大概如果我将文本块设置为width:100%它应该与 li 的宽度相同但它的扩展为最外层的父母。

代码：https ://jsfiddle.net/wbbgjthe/

#button-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  margin-top: 33vh;
  margin-left: 50vw;
  transform: translate(-50%, -50%);
  width: 90vw;
  height: 56vh;
  align-items: center;
}

#button-container li {
  display: inline-block;
  border: 1px solid #000;
}

#button-container .text-block {
  position: absolute;
  border: 1px solid #000;
  top: 200px;
  left: 133px;
  width: 100%;
  display: inline-flex;
}

<ul id="button-container">
  <li>
    <a href="#"><img class="htmllogo" src="https://psdf.org.pk/wp-content/uploads/2017/12/default-placeholder-300x300.png">
      <div class="text-block">
        <h2>HTML</h2>
        <p>My web projects</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img class="csharplogo" src="https://psdf.org.pk/wp-content/uploads/2017/12/default-placeholder-300x300.png"></a>
  </li>
</ul>

标签： htmlcss

Answer 1

添加position:relative到您的li元素，以便绝对text-block定位相对于它定位。 目前它相对于body.

#button-container li {
    display: inline-block;
    border: 1px solid #000;
    position: relative; /* add this */
}