Question

我有一个DIV，里面是H1标签，有一些描述，我能够为整个H1标签提供一个边框底部，但是如何给它的一个特定部分提供一个边框底部就像在下面的片段中一样。

添加SPAN标记可以正常工作，但在为边框添加填充以添加空间后，它会错误地传播，从而破坏文本格式。

HTML：

  <div class="row">
    <div class="col-md-4 text-center" id="column1">
        <h3 class="">
        <span>Responsive  Web Design </span>
        </h3>
        <br />
        <br />
        <p>
            Coupling aesthetic design sensibilities with.
        </p>
    </div>

CSS：

#column1 > h3 > span{
border-bottom: 5px solid #16a085;
padding-bottom: 20px;
}

我在这里做错了什么？

Answer 1

我使用：伪elemnt为元素添加边框

＆＃13;

/** = for better view not required */

.row {
  text-align: center;
  display: inline-block;
  border: 1px solid red;
}

/** = end */
span {
  display: block;
  position: relative;
  padding: 15px 0;
}
span:after {
  content: '';
  position: absolute;
  width: 30px; /* change as per your design */
  height: 2px; /* change as per your design */
  background: blue; /* change as per your design */
  bottom: 0;
  left: 50%;
  margin-left: -15px;
}

＆＃13;

<div class="row">
  <div class="col-md-4 text-center" id="column1">
    <h3 class="">
        <span>Responsive  Web Design </span>
        </h3>
    <br />
    <br />
    <p>
      Coupling aesthetic design sensibilities with.
    </p>
  </div>

＆＃13;

Answer 2

删除<span>和<br>标记，并使用css设置<h1>样式，以在标题上方和下方创建间距。然后为该行添加一个伪元素。

下面显示的示例在伪元素上使用position: absolute。为确保正确定位，请确保h1样式为position: relative。

＆＃13;

.container {
  text-align: center;
}
h1 {
  position: relative;
  margin: 0 0 25px;
  padding: 120px 0 25px;
}
h1::before { /* for the graphic */
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: block;
  width: 100px;
  height: 100px;
  background: transparent url(https://cdn3.iconfinder.com/data/icons/communication-3/512/computer_phone_tablet-512.png) left top no-repeat;
  background-size: contain;
}
h1::after { /* for the line below the h1 */
   content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: block;
  width: 50px;
  border-top: 5px solid green;
}

＆＃13;

<div class="container">
  <h1>Responsive Web Design</h1>
  <p>Lorem ipsum dolor sit amet sed umini.Lorem ipsum dolor sit amet sed umini.</p>
</div>

＆＃13;

Answer 3

好吧，我建议你去寻找第一个答案。但是，如果您发现此pseudo事情有点令人困惑，请尝试<hr>标记。给它一个固定的宽度并将其放在标题下面。简单干净。

参见 FIDDLE

#column1 > h3 > span{
padding-bottom: 20px;
}

.text-center hr{
  border-bottom: 5px solid #16a085;
  width: 50px;
  margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row">
    <div class="col-md-4 text-center" id="column1">
        <h3 class="">
        <span>Responsive  Web Design </span>
        </h3>
        <hr/>
        <br />
        <br />
        <p>
            Coupling aesthetic design sensibilities with.
        </p>
    </div>

Answer 4

只需像这样将 display 属性设置为 inline-block display: inline-block; 然后它会起作用

特定部分的底部边框

4 个答案: