将元素排列在div

Question

这让我发疯了。。。

基本上，我有这个网站，我希望它有包含网站名称、搜索栏和登录/登录按钮的标题div。我希望徽标在左边，搜索栏在中间，登录和登录在右边，一个在另一个上面。标志和搜索应该在垂直方向的中间。

这是我的代码：

#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>

Answer 2

首先，将"登录"one_answers"登录"文本放入同一个容器（例如<div id="log_in"> </div>）中。从#header中删除line-height:90px（我相信您添加它是为了移动搜索框）。相反，将margin-top:30px添加到#search。如果#home也需要line-height，只需将其添加到那里即可。

希望这符合您的需求；）