我有一个 div block ,我想在文本下方而不是整个 div block 中应用 border-bottom div block 是
#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>
最佳答案
您可以将文本包装在一个内联元素中,例如 <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
如果你想应用 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>
关于css - 文本下方的边框底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41331928/