html - 添加居中- 文本中间的行

Question

我想要一个响应式 UI，其中 < hr> 行介于 2 个文本之间：

test ----------------------- test

我试过：

test<hr style="display:inline;"/>test

但它变成了一条垂直线，我不想像这样使用表格：

<table>
  <tr>
    <td>test</td>
    <td style="width:100%;"><hr/></td>
    <td>test</td>
  </tr>
</table>

有没有更简单的方法来做到这一点？

标签： htmlcssline

Answer 1

您可以使用 flexbox [简单方法]

.main {
  display: flex;
  align-items: center;
}

.line {
  flex-grow: 1;
  border-bottom: 1px solid black;
  margin: 5px
}

<p class="main">
  <span>Text1</span>
  <span class="line"></span>
  <span>Text2</span>
</p>