带有 Html 和 Css 的标题下的文本答案

【问题标题】：text under header with Html and Css带有 Html 和 Css 的标题下的文本
【发布时间】：2016-05-03 04:46:13
【问题描述】：

我有以下代码，它在我的网站的每个页面中显示一个标题：

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

<head>
  <title>About HatSpace</title>
  <link rel="stylesheet" type="text/css" href="css/about_style.css">
</head>

<body>
  <div id="header">
    <div>
      <h1>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>

现在，我怎样才能在它的正下方添加这三个文本，以便它们也将包含在标题 div 中。我尝试了各种方法，但它重新排列了我的标题...我只想让用户更轻松地导航，这样当他们点击主页时，无论他们在哪个页面，他们都会回到主页，因为它始终是标题的一部分。谢谢

【问题讨论】：

使用 bootstrap 更适合标题和菜单，更适合响应式
我知道，但是我想学css html
然后在标题中创建两行，在第一行添加徽标、搜索框和登录按钮，并使用 html5 导航标签使用此链接阅读html5doctor.com/nav-element
你的问题答案就在这里stackoverflow.com/questions/4870955/…

标签： html css

【解决方案1】：

将您的第一行包装在标题内的另一个 div 中，并为其提供您现在提供整个标题的 flex 属性。然后在三个文本之后创建另一个具有相同 flex 属性的 div。例如：

<div id="header">
<div id="part1">
<div>
  <h1>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>
<div id="part 2">
 // About us, etc...
 </div>

#part1 {
     display: flex;
      justify-content: space-between;
 }

 #part2 {
     display: flex;
      justify-content: space-between;
 }

【讨论】：