html - 如何用flex水平显示hr？

使用flexbox做样式时，如果父容器设置为display: flex它会导致 <hr />垂直显示而不是水平显示。

.container {
  display: flex;
  flex: 1;
}

<div class='container'>
  <h2>Test</h2>
  <hr />
</div>

最佳答案

使用 flex-grow: 1 或 width: 100% 使其增长以匹配父级的宽度。如果您计划在 .container

.container {
  display: flex;
  flex: 1;
}

hr {
  flex-grow: 1;
  /* width: 100%; */ /* or this */
}

<div class='container'>
    <hr>
</div>

关于html - 如何用flex水平显示hr？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42986500/

相关文章：

html - 使用 flex 盒