Question

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

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

Answer 1

将position:relative添加到您的li元素中，以便绝对定位的text-block为positioned relative to it.目前它相对于{{1}绝对定位}}

body

Answer 2

请注意：

绝对定位元素的顶部，右侧，底部和左侧属性指定元素的包含块边缘的偏移量。 - position @ MDN

......和......

如果position属性是绝对的，则包含的块由最近的祖先元素的填充框的边缘形成，该祖先元素具有除静态以外的位置值（固定，绝对，相对的，或粘性的）。 - Identifying the containing block @ MDN

由于您希望.text-block相对于<li>定位，请在position:relative上设置<li>，将其定义为包含.text-block的块。

我也删除了left:133px，因为它已不再需要了。 Left将默认为auto，在您的上下文中，<li>会将其放置在包含box-sizing:border-box的左边缘。

我还将.text-block添加到width，以便border合并border-box。

#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 { position: relative; border: 1px solid #000; } #button-container .text-block { position: absolute; border: 1px solid #000; top: 200px; width: 100%; box-sizing: border-box; display: inline-flex; }告诉浏览器在您为元素的宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为100像素，则该100个像素将包含您添加的任何边框或填充，并且内容框将缩小以吸收该额外宽度。这通常使元素的大小更容易。 - box-sizing @ MDN。

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

exec_command

列表项div不是父级的100％宽度

2 个答案: