Question

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

＆＃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;
}

＆＃13;

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

＆＃13;

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

Answer 1

将第一行包裹在标题内的另一个div中，并为其提供现在提供整个标题的flex属性。然后使用三个文本制作另一个具有相同flex属性的div。例如：

mList.add()

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

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

1 个答案: