Question

如何使H3和HR内联，或如何设计，标题后面会出现一条水平线，在我的情况下，只有hr进入了下一行

<div class="row">
    <h3 class="col-md-4 col-sm-4 col-xs-6" data-i18n-key="Date.time.location"></h3>
        <hr class="col-md-8 col-sm-6 col-xs-4">
</div>

Answer 1

要内联这两个元素，请将h3和hr包裹在单独的div元素中，然后将其类移至各自的div：

<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-8">
        <h3 data-i18n-key="Date.time.location">Title</h3>
    </div>
    <div class="col-md-8 col-sm-6 col-xs-4">
        <hr>
    </div>
</div>

Answer 2

您可以使用（display：inline-block）属性使h3和hr内联，但是我认为下面的示例将对您有所帮助。

.drawLine{
  position:relative;
}

.drawLine:before{
  content:"";
  position:absolute;
  top:50%; /* line position can be changed according to requirment either top:0, top:50% or bottom:0*/
  left:0;
  width:100%;
  height:1px;
  background:#ccc;
}

.drawLine span{
  display:inline-block;
  background:#fff;
  position:relative;
  padding-right:5px; /*space between text and line*/
}

<div class="row">
    <h3 class="col-xs-12 drawLine"><span data-i18n-key="Date.time.location">your text will be here</span></h3>        
</div>

如何使h3和<hr />内联，或如何设计标题后会有一条水平线

2 个答案: