为什么按钮在父容器之外？ [复制]答案

【问题标题】：Why is the button outside of the parent container? [duplicate]为什么按钮在父容器之外？ [复制]
【发布时间】：2021-08-08 05:25:07
【问题描述】：

为什么按钮在父容器之外？按钮根本不应该在容器之外，因为容器总是太高以至于所有子元素都适合。

只需将这行代码粘贴到我的 CSS 中即可解决此问题。但通常不需要边距。

.apply-link-container {
      margin-bottom: 5rem;
    }

即使解决方案看起来很简单。我已经做了几个小时了，不知道我做错了什么。按钮应该在容器内。

.bg-1 {
  background-color: #ccc;
}

.apply-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
}

.apply-section-text {
  max-width: 50rem;
}

.apply-section .apply-link-container {
  margin-top: 2rem;
}
.apply-section a {
  background-color: rgb(250, 187, 120);
  padding: 1rem;
  border-radius: 1rem;
  font-size: 2rem;
  border-bottom: none;
  text-decoration: none;
  color: #fff;
}

.apply-section a:hover {
  background-color: rgb(241, 146, 44);
  border-bottom: none;
}

<section>
        <div class="apply-section bg-1">
          <h2>Lorem</h2>
          <div class="apply-section-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo</div>
          <div class="apply-link-container"><a class="apply-link" href="#">button</a></div>
        </div>
      </section>

【问题讨论】：

如果您将<a> 元素设为块级，它将保留在父级中并且不会溢出。
@Tanner Dolby 你的小费解决了我的问题。但是我不太明白为什么要把a元素变成块元素
@software 当元素内联时，它将被定位，使其文本内容与其放置的文本行对齐。然后，当您向其中添加填充时，它只会围绕文本展开，但由于它仍然是文档流的一部分，因此不会影响包含元素。如果您改为将其显示设置为inline-block，您仍会将其置于内联，但它将成为文档流的一部分，因此填充和任何其他框模型样式将影响包含元素。

标签： html css

【解决方案1】：

您可以将inline <a> 元素变成block-level 元素，这样它会创建一个“块”，并且您给<a> 元素父元素的2rem 边距不是制作内容溢出底部。现在内容保留在父容器内容框内，即使有上边距。

.bg-1 {
  background-color: #ccc;
}

.apply-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
}

.apply-section-text {
  max-width: 50rem;
}

.apply-section .apply-link-container {
  margin-top: 2rem;
}
.apply-section a {
  background-color: rgb(250, 187, 120);
  padding: 1rem;
  border-radius: 1rem;
  font-size: 2rem;
  border-bottom: none;
  text-decoration: none;
  color: #fff;
  display: block; /* or inline-block */
}

.apply-section a:hover {
  background-color: rgb(241, 146, 44);
  border-bottom: none;
}

<section>
        <div class="apply-section bg-1">
          <h2>Lorem</h2>
          <div class="apply-section-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo</div>
          <div class="apply-link-container"><a class="apply-link" href="#">button</a></div>
        </div>
      </section>

【讨论】：

【解决方案2】：

您可以尝试将其添加到您的容器类中：

身高：适合内容；

【讨论】：