html - 为什么“你好”不去左上角？

Question

我想在左上角创建一个菜单栏，其中每个按钮只是一个单词，但我无法让单词转到屏幕的左上角。我不知道它是否与 flexbox 有关...有什么建议吗？

.left-side {
  background: white;
  width: 50%;
  height: 100%;
  left: 0;
  bottom: 0;
  color: black;
  position: absolute;
}

.right-side {
  background: black;
  width: 50%;
  height: 100%;
  right: 0;
  bottom: 0;
  color: white;
  position: absolute;
}

.left-side,
.right-side {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

h1 {
  font-size: 72px;
  font-weight: 700;
}

p {
  font-size: 48px;
  font-weight: 300;
}

#navbar {
  color: black;
  width: auto;
  float: left;
  top: 0;
}

<div class="left-side">
  <p id="navbar">Hello</p>
  <h1>Welcome.</h1>
  <p>I want to welcome you!</p>
</div>
<div class="right-side">
  <h1>Corey M.</h1>
  <p>Corey is my name :)</p>
</div>

标签： htmlcss

Answer 1

您可以position: absolute像这样使用“hello”来定位：

#navbar {
  color: black;
  width: auto;
  position: absolute;
  margin: 0;
  left: 20px;
  top: 20px;
}

请参阅此处的工作示例：https ://jsfiddle.net/n75cqgo3/