无法对齐元素。解决这个问题的方法是什么？

Question

我正在尝试制作汉堡菜单的图标并将其与 flexbox 对齐。但我不能。我的图标向左（超出菜单和浏览器屏幕），出现奇怪的顶部缩进。

这是我的代码：

* {
  margin: 0;
  padding: 0;
}

input {
  display: none;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100px;
  background: lightblue;
}

span {
  position: absolute;
  z-index: 1;
  width: 70px;
  height: 5px;
  background: #000;
  display: block;
}

span:nth-child(1) {
  top: 0px;
}
span:nth-child(2) {
  top: 30px;
}

span:nth-child(3) {
  top: 60px;
}

label {
  background: red;
  position: relative;
  display: block;
}

<div class="wrapper">
  <input type="checkbox" id="click">
  <label for="click">
    <span></span>
    <span></span>
    <span></span>
  </label>
</div>

我还想知道为什么标签看不到它的 child 元素。我的意思是 parent 和 position: relative/fixed/absolute 必须看到它的 child 和 position: absolute。

我错过了什么？

Answer 1

事实上，汉堡菜单的按钮可以用不同的方式制作。

看看我的例子。现在你的标签 <label> 有一个 height 和 width，这意味着你现在可以调整线条的高度 - <span>.

现在，您可以看到背景颜色 - background: red。

此外，我为 label 添加了一条规则 right: 50px。现在您可以调整填充了。

我在 css 中标记了所有编辑。

* {
  margin: 0;
  padding: 0;
}

input {
  display: none;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100px;
  background: lightblue;
}

span {
  /*position: absolute;*/ /*remove*/
  z-index: 1;
  /*width: 70px;*/ /*remove*/
  width: 100%; /*add*/
  height: 5px;
  background: #000;
  display: block;
}

span:nth-child(1) {
  top: 0px;
}
span:nth-child(2) {
  top: 30px;
}

span:nth-child(3) {
  top: 60px;
}

label {
  background: red;
  position: relative;
  /*display: block;*/ /*remove*/
  
  display: flex; /*add*/
  flex-direction: column; /*add*/
  justify-content: space-between; /*add*/
  width: 70px; /*add*/
  height: 50px; /*add*/
  right: 50px; /*add*/
}

<div class="wrapper">
  <input type="checkbox" id="click">
  <label for="click">
    <span></span>
    <span></span>
    <span></span>
  </label>
</div>

Answer 2

如果你把你的汉堡包菜单位置设置为相对位置，然后给它们每个留边距，会更容易

由此，

  span {
  /*position: absolute;*/ /*remove*/
  z-index: 1;
  /*width: 70px;*/ /*remove*/
  width: 100%; /*add*/
  height: 5px;
  background: #000;
  display: block;
}

span:nth-child(1) {
  top: 0px;
}
span:nth-child(2) {
  top: 30px;
}

span:nth-child(3) {
  top: 60px;
}

至此

span {
    position: relative;
    margin: 30px 20px;
    z-index: 1;
    width: 70px;
    height: 5px;
    background: #000;
    display: block;
  }

您认为没有必要编辑每一行 humberger 行

无法对齐元素。解决这个问题的方法是什么？

Can't align element. What's the way to fix this?

html

css

position

flexbox