Question

有没有人知道如何在flex-container中对齐<hr>元素。除了flex-start之外，当<hr>所有其他元素对齐时。我需要一个不在position: absolute元素上使用<hr>的解决方案，因为这会影响文档流并导致其他问题。

codepen：https://codepen.io/emilychews/pen/QaPQaW

CSS

body {margin: 0; padding: 0;}

.box {
  width: 300px;
  height: 300px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

hr {
  position: relative;
  display: block;
  background: white;
  height: 3px;
  width: 75px;
  margin-left: 0 auto;
}

HTML

<div class="box">
  <h1> Hello </h1>
  <hr>
  <p> Thanks </p>
</div>

Answer 1

hr元素设置了默认边距，Chrome设置为：

-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;

由于Flexbox中的自动保证金会覆盖justify-content / align-*属性，因此您需要将其删除，例如margin: 0;会{，1}}，并在这种情况下align-items: flex-start;正确应用。

Stack snippet

＆＃13;

body {margin: 0; padding: 0;}

.box {
  color: white;
  width: 300px;
  height: 300px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

hr {
  position: relative;
  background: white;
  height: 3px;
  width: 75px;
  align-self: flex-start;
  margin: 0;                           /* added  */
}

＆＃13;

<div class="box">
  <h1>Hello</h1>
  <hr>
  <p>Thanks</p>
</div>

＆＃13;

Answer 2

将hr更改为

background: white;
height: 3px;
width: 75px;
margin-left: 0;

在Flex容器内对齐<hr />元素

2 个答案: