html - 在 div 中排列元素

Question

这让我发疯...

基本上，我有这个网站，我希望它有包含网站名称、搜索栏和登录/登录按钮的标题 div。我希望 Logo 在左侧，搜索栏在中间，登录和登录在右侧，一个在另一个之上。 Logo 和搜索应垂直居中。

这是我的代码:

#home {
  position: absolute;
}
#search {
  position: absolute;
  left: 30%;
}
#search_box {
  width: 500px;
}
#header {
  position: relative;
  height: 90px;
  line-height: 90px;
  background-color: burlywood;
  color: beige;
  padding: 10px;
  float: top;
  margin: auto;
  border-style: groove;
}
#log_in {
  float: right;
}
#sign_in {
  float: right;
}

<div id="header">
  <div id="home">
    <h1>HatSpace</h1>
  </div>
  <div id="search">
    <form>
      <input id="search_box" type="text" placeholder="Search the Website">
    </form>
  </div>
  <div id="log_in">
    <p>Log in</p>
  </div>
  <div id="sign_in">
    <p>Sign in</p>
  </div>
</div>

这是我在 Chheda 的代码之后得到的

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: burlywood;
    color: beige;
    border-style: groove;
    }
#register {
    display: flex;
    flex-direction: column;
    }

<div id="header">
            <div>
                <h1><a href="index.html"</a>HatSpace</h1>
            </div>
            <div id="register">
                <form>
                    <input style = "width: 500px;" type="text" placeholder="Search the Website">
                </form>
            </div>
            <div>
                <div>
                    <p>Log in</p>
                </div>
                <div>
                    <p>Sign in</p>
                </div>
            </div>
        </div>

如果你从 HatSpace 元素中删除 href，那么它看起来就像我想要的那样，但我在那里需要 href，这有什么问题!!!

Answer 1

你在找这样的东西吗？

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#register {
  display: flex;
  flex-direction: column;
}

<div id="header">
  <div id="home">
    <h1>HatSpace</h1>
  </div>
  <div id="register">
    <div id="log_in">
      <p>Log in</p>
    </div>
    <div id="sign_in">
      <p>Sign in</p>
    </div>
  </div>
  <div id="search">
    <form>
      <input id="search_box" type="text" placeholder="Search the Website">
    </form>
  </div>
</div>