gpt4 book ai didi

html - 在导航中居中放置多个 div

转载 作者:太空宇宙 更新时间:2023-11-04 13:28:20 25 4
gpt4 key购买 nike

我正在创建自己的网站,我想将这个导航菜单放在顶部,其中包含 4 个 div,每个 div 都链接到网站上的另一个地方,但我无法弄清楚如何将它们放在网站的中心。

这是我的代码;

<html>
<head>
<link rel="stylesheet" href="indexc.css">
<title>
Title
</title>
</head>
<body>
<p id="balk">
<nav><b>
<div id="b1"><a href="html/" style="text-decoration:none;color:white;"><h2>About</h2></a></div>
<div id="b2"><a href="html/" style="text-decoration:none;color:white;"><h2>Videos</h2></a></div>
<div id="b3"><a href="html/" style="text-decoration:none;color:white;"><h2>History</h2></a></div>
<div id="b4"><a href="index.html" style="text-decoration:none;color:white;"> <h2>Home</h2></a></div>
</b></nav>
</p>
</body>
</html>

和样式表;

body {font-family:sans-serif;background-image: url("pictures/rain.jpg");}
#b1 {border-style:solid;border-color:#7f7f7f;width:310px;text-align:center;padding-top:3px;padding-bottom:3px;background-color:#7f7f7f;opacity:0.8;position:fixed;}
#b2 {border-style:solid;border-color:#7f7f7f;width:310px;text-align:center;padding-top:3px;padding-bottom:3px;background-color:#7f7f7f;opacity:0.8;position:fixed;left:323px;}
#b3 {border-style:solid;border-color:#7f7f7f;width:310px;text-align:center;padding-top:3px;padding-bottom:3px;background-color:#7f7f7f;opacity:0.8;position:fixed;left:637.5px;}
#b4 {border-style:solid;border-color:#7f7f7f;width:310px;text-align:center;padding-top:3px;padding-bottom:3px;background-color:#7f7f7f;opacity:0.8;position:fixed;left:952px;}

现在导航菜单位于左侧,但我希望它位于页面的正中间,无论屏幕大小如何。

无论如何,如果你能帮助我,谢谢!

最佳答案

您不能在段落标签中使用 div,因为它们用于文本/内容。您还需要一个包装器 div 或一个容器,它将容纳您的网站主体。例如

<html>
<head>
<link rel="stylesheet" href="indexc.css">
<title>
Title
</title>
<style>
.container{ width:900px; margin:auto; float:none;}
</style>
</head>
<body>

<div class="container">
<nav>
<div id="b1"><a href="html/" style="text-decoration:none;color:white;"><h2>About</h2></a></div>
<div id="b2"><a href="html/" style="text-decoration:none;color:white;"><h2>Videos</h2></a></div>
<div id="b3"><a href="html/" style="text-decoration:none;color:white;"><h2>History</h2></a></div>
<div id="b4"><a href="index.html" style="text-decoration:none;color:white;"> <h2>Home</h2></a></div>
</nav>
</div>
</body>
</html>

关于html - 在导航中居中放置多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32739319/

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