如何在<hr />

Question

我基本上有类似

的东西

＆＃13;

＆＃13;

div {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
}

＆＃13;

<div>
  <hr>
  <button>
    <hr>
</div>

＆＃13;

＆＃13;

＆＃13;

但是它不起作用，我也试着改造小时，但也没有工作。 我基本上想要一条线，包括一个hr +一个按钮+一小时（所以hr大约是一半大小）都在同一条线（行）上，全部居中

任何提示？

谢谢

Answer 1

您可以在flex: 1上使用hr

div {
  display: flex;
  justify-content: center;
  align-items: center;
}
hr {
  flex: 1;
  border: none;
  height: 2px;
  background: black;
}

<div>
  <hr>
  <button>Button</button>
  <hr>
</div>

更新：如果您想更改小时的宽度，可以将其设为Fiddle，也可以使用伪元素代替Fiddle