gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:57:18 24 4
gpt4 key购买 nike

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

#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 中。我尝试了各种方法,但它重新排列了我的标题...我只是想让用户更轻松地导航,这样当他们单击主页时,无论他们在哪个页面,他们都会回到主页,因为它始终是标题的一部分。谢谢

enter image description here

最佳答案

将您的第一行包裹在标题内的另一个 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;
}

关于html - 带有 Html 和 Css 的标题下的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36995781/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com