gpt4 book ai didi

html - 添加第二个 css 标签使页面居中时,为什么导航栏不随页面的其余部分移动?

转载 作者:行者123 更新时间:2023-11-28 05:46:03 25 4
gpt4 key购买 nike

我试图实现一个完全居中的页面,但是当我添加 CSS 代码使其居中时,导航栏没有移动。它只有在我删除它的标签时才会移动。这是我的原始代码。导航栏正常工作。 (按钮为绿色,排列正确,但所有元素都左对齐。

<!DOCTYPE html>
<html lang="en-us">
<body bgcolor="black">
<head>

<link rel="stylesheet" href="style.css">
<title>Title</title>
</link>

<img src="img.png"></img>

</head>

<body>
<div id="menubar">
<ul
<li><a href="item1.html">page 1</a></li>
<li><a href="item2.html">page 2</a></li>
<li><a href="item3.html">page 3</a></li>
<li><a href="item4.html">page 4</a></li>
</ul>
</div>
</body>

<body>

<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>

<div id="items">
<ul>
<p><a href="#">Item 1</a></p>
<p><a href="#">Item 2</a></p>
</ul>
</div>
</a>
</body>
</body>
</div>
</html>

这是原始 CSS。

#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
float: left;
margin-right: 0.5em;
}

为了使页面居中,我添加了以下 CSS 代码:

body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
{
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}

并在页面的开头和结尾添加了这些行。

如果您尝试代码,整个页面居中,导航栏除外。您可能会说,我对此还很陌生。

最佳答案

适合我。唯一的问题是你的代码结构。你的代码格式应该是

body {
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
#menubar {
width: 800px;
text-align: center;
border: 0px;
padding: 0px;
margin: 0 auto;
}

#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
display: inline-block;
margin-right: 0.5em;
}
<!DOCTYPE html>
<html lang="en-us">
<head>

<link rel="stylesheet" href="style.css" />
<title>Title</title>
</head>
<body bgcolor="black">
<div id="menubar">
<ul>
<li><a href="item1.html">page 1</a></li>
<li><a href="item2.html">page 2</a></li>
<li><a href="item3.html">page 3</a></li>
<li><a href="item4.html">page 4</a></li>
</ul>
</div>

<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
</a>

<div id="items">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</body>
</html>

关于html - 添加第二个 css 标签使页面居中时,为什么导航栏不随页面的其余部分移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37606105/

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