Question

我有一个div块我想在文本下面应用border-bottom而不是整个div块 div块是

#info-header {
    font-size: 40px;
    text-align: center;
    margin:100px 10px 10px 10px;
    font-family: Poiret One;
    color:lightyellow;
    border-bottom: 1px solid whitesmoke;
}

<div id="info-header">
  find us through 
</div>

Answer 1

您可以将文字包装在<span>等内联元素中，并对其应用边框。

<强> HTML：

<div id="info-header">
  <span>some text here...</span>
</div>

<强> CSS：

#info-header span {
  border-bottom: 1px solid whitesmoke;
  display: inline-block;
  vertical-align: top;
}

注意 ：如果要应用块级属性但是保持其行为类似于内联元素，则可以创建元素inline-block。这样，您还可以控制border-width以及文本和边框线之间的距离。

body {
  background: green;
  min-height: 100vh;
  margin: 0;
}
#info-header {
  font-size: 40px;
  text-align: center;
  margin:100px 10px 10px 10px;
  font-family: Poiret One;
  color:lightyellow;
}

#info-header span {
  border-bottom: 1px solid whitesmoke;
  display: inline-block;
  vertical-align: top;
}

<div id="info-header">
  <span>some text here...</span>
</div>

Answer 2

添加css属性text-decoration：下划线

Answer 3

您应该使用text-decoration属性。在你的情况下它： text-decoration: underline; 您还可以使用文字修饰进行上线和直线阅读CSS text-decoration Property

Answer 4

您可以更改另一个display级别的block值。

html {
  background: lightgray
}
#info-header {
  font-size: 40px;
  /*text-align: center;
    margin:100px 10px 10px 10px;*/
  display: table;/* shrinks on content */
  margin: 10px auto;/* margin:auto instead text-align for this block  */
  font-family: Poiret One;
  color: lightyellow;
  border-bottom: 1px solid whitesmoke;
}

<div id="info-header">
  find us through
</div>

codepen

Answer 5

为<div>提供固定宽度并为其设置{margin：0 auto} 以进行居中

＆＃13;

body {
  background: #131418;
  text-align: center;
}
#info-header {
  font-size: 40px;
  margin: 0 auto;
  width: 300px;
  color: lightyellow;
  border-bottom: 1px solid whitesmoke;
}

＆＃13;

<div id="info-header">this is a nice title</div>

＆＃13;

边框位于文字正下方

5 个答案: