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

你在找这样的东西吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，将“登录”和“登录”文本放入同一容器中（例如<div id="log_in"> </div>）。从line-height:90px移除#header（我相信您已添加它以移动搜索框）。而是将margin-top:30px添加到#search。如果您还需要line-height #home，请将其添加到那里。

希望这符合您的需求;）

在div中排列元素

2 个答案: