hr标签的自定义css

时间:2016-06-03 07:09:31

标签: html css

我宣布hr标签的css如..

hr { 
    height: 2px !important;
    background-color: #A2B1B9;
    width: 9%;
    margin-left: 0px;
    margin-top:auto;
  }

但hr标记的宽度总是需要与支持的文本相同。请参考屏幕截图。 image

在这种情况下,我可以使用内联css来提供不同宽度和hr标签。但是,由于内联css不符合Web开发的道德标准,我可以采用其他任何方法使其变得动态吗?

3 个答案:

答案 0 :(得分:5)

HI现在尝试这种方式

创建一个类并习惯于此css。 这是你的最佳选择。

.customHr{
 padding-bottom:5px;
  border-bottom:solid 2px black;
  display:inline-block;
  vertical-align:top;
  color:blue;
}
<p>Custom Text here</p>
<p><span class="customHr">Custom Text here</span></p>
<p>Custom here</p>
<p>Custom Text</p>
<p><span class="customHr">Custom</span></p>
<p>Custom Text here</p>
<p>Custom Text here</p>

答案 1 :(得分:3)

Rohit Azad的答案是最好的,但如果是为了道德&#34;你宁愿使用hr的原因,你可以将它与文本一起包装以获得相同的长度。

&#13;
&#13;
div {
  display: inline-block;
}
&#13;
<div>
  <span>Text here</span>
  <hr>
</div>
<br>
<div>
  <span>T-t-t-t-t-text here</span>
  <hr>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您可以使用下划线,方法是将文本放在标记中,然后将自定义css放入其中。