Question

如何在HTML和CSS中创建以下内容？

Some Text --------------------------------------------- ------------

该行应该是实心的，没有虚线

由于

Answer 1

您可以使用以下代码段实现您想要的效果：

<style>
    .inline-hr {
        display: inline-block;
        width: 50px;
        vertical-align: middle;
    }
</style>
Some text <hr class="inline-hr"/>

然后，您可以通过调整样式的宽度来使线条尽可能宽。

Answer 2

您可以使用这样的flexbox执行此操作：

＆＃13;

.text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
 
.text::after {
  content: "";
  -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  -ms-flex-item-align: center;
   -ms-grid-row-align: center;
           align-self: center;

  margin-left: 8px; /*space before line*/
  height: 2px;      /*line thickness*/
  background: #333; /*line color*/
}

＆＃13;

<div class="text">Some Text</div>

＆＃13;

左侧的文本，右侧的行，HTML和CSS

2 个答案: