Question

我正在尝试将以下span标记转换为水平分隔符：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  id="getScore" type="number" min="0" max="5">

如果span标签有内容，则不会显示。我认为HTML: <div class="form-group-divider"> <span></span> <h5>{{ field.title }}</h5> <span></span> </div> CSS: .form-group-divider { h5 { display: inline-block } span { background-color: border-color width: 100% height: 1px content: ' ' } }会解决这个问题，但事实并非如此。

如何显示这些span标签？

Answer 1

<span>是内联元素，因此您需要内容为其提供任何可辨别的维度。我添加了display:block，因为它们的行为应该像<hr/>。顺便说一句，为什么不使用<hr/>？以下演示包含<hr/>和<span>

的示例

演示

＆＃13;

.form-group-divider h5 {
  display: inline-block
}

.form-group-divider span {
  display: block;
  background-color: grey;
  width: 100%;
  height: 1px;
}

＆＃13;

<div class="form-group-divider">
  <hr/>
  <h5>Using &lt;hr/&gt;</h5>
  <hr/>
</div>


<div class="form-group-divider">
  <span></span>
  <h5>Using &lt;span&gt;</h5>
  <span></span>
</div>

＆＃13;

Answer 2

你可以使用这个CSS span :: after {

content: '';
width: 100%;
border: 1px solid red;
display: block;

}

Answer 3

尝试使用 display: block

HTML：

  <div class="form-group-divider">
     <span></span>
        <h5>{{field.title}}</h5>
        <span></span>
    </div>

CSS：

span{
    display: block;
    background: blue;
    width: 100%
    height: 1px;
}

如何将没有内容的跨度转换为分隔线？

3 个答案:

演示