Question

我想在HTML中在此文本所示的文本之间添加一条水平线。从这段代码中，我得到一条线，但不在文本之间居中。我该如何实现？

我需要的是类似的东西：Publication ---------------------方法。

我的代码：

.horizontal{
    display: inline-block;
    width: 100px;
}

<div class="col-sm-4">
    <h4>Publication <hr class="horizontal"/>Method</h4>
</div

Answer 1

您可以为flex标签设置h4规则。对齐中心规则align-items: center。这个示例可以使您的行与单词的中心对齐。

.col-sm-4 h4 {
    display: inline-flex;
    align-items: center;
}

.horizontal{
    /*display: inline-block;*/
    width: 100px;
    margin: 0;
}

<div class="col-sm-4">
    <h4>Publication <hr class="horizontal"/>Method</h4>
</div

Answer 2

另一种解决方案是使用伪选择器::after

.horizontal::after{
  content: "";
  display: inline-block;
  border:1px solid black;
  margin-left:2px;
  margin-bottom: 3px;
  width: 100px;
}

<div class="col-sm-4">
    <h4>
        <span class="horizontal">Publication</span> 
        Method
    </h4>
</div

Answer 3

添加vertical-align属性<nav> <li><a href="#">Home</a></li> <li>I want to add a class to this element as it has a child element <a href="#">Services</a> <ul> <li><a href="">Graphic Designing</a></li> <li><a href="">Web Designing</a></li> </ul> </li> <li><a href="#">Contact</a></li> </nav>。

text-top

vertical-align:text-top;

.horizontal{
    display: inline-block;
    width: 100px;
    vertical-align:text-top;
}

在HTML中的文本之间添加水平线

3 个答案: