Question

我试图为段落底部的h3设置背景颜色，但是当我只想要它覆盖h3时，颜色覆盖了标题和段落文本。不知道为什么它的超大尺寸而不仅仅是围绕着h3。

我就是这样做的 -

＆＃13;

section.council {
  height: 350px;
  max-width: 100%;
  position: relative;
  background-color: #F0F0F0;
}

.council h2 {
  text-align: left;
  margin-top: 30px;
  line-height: 5px;
  font-size: 20px;
  color: #000000;
}

.council p {
  font-size: 10px;
  color: black;
  float: left;
  margin-top: 20px;
  margin-right: 50px;
}

.readmore h3 {
  color: #FFFFFF;
  font-size: 15px;
  text-align: center;
  background-color: #00BFFF;
}

＆＃13;

<div class="row">
  <h4>LATEST CASE STUDY</h4>
  <div class="six columns">
    <h2>Wakefield Council</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci.
      <br> Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi.
    </p>
    <div class="readmore">
      <h3>READ MORE</h3>
    </div>
  </div>

</div>

＆＃13;

Answer 1

您的问题是否是h3默认情况下作为块元素超出整个宽度的事实......？

那么只需将其设置为内联或内联块，然后将text-align移动到父元素以使其居中：

section.council {
  height: 350px;
  max-width: 100%;
  position: relative;
  background-color: #F0F0F0;
}

.council h2 {
  text-align: left;
  margin-top: 30px;
  line-height: 5px;
  font-size: 20px;
  color: #000000;
}

.council p {
  font-size: 10px;
  color: black;
  float: left;
  margin-top: 20px;
  margin-right: 50px;
}

.readmore {
   text-align:center;
}
.readmore h3 {
  display: inline-block;
  color: #FFFFFF;
  font-size: 15px;
  background-color: #00BFFF;
}

<div class="row">
  <h4>LATEST CASE STUDY</h4>
  <div class="six columns">
    <h2>Wakefield Council</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci.
      <br> Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi.
    </p>
    <div class="readmore">
      <h3>READ MORE</h3>
    </div>
  </div>

</div>

如果你想让它看起来更像按钮y，那么也要添加一些填充。

CSS - 背景颜色超大/覆盖段落文本而不仅仅是h3

1 个答案: