gpt4 book ai didi

html - 填充不会在 html 中消失

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

enter image description here

此示例基于 w3schools。

我想将“导航”部分附加到页眉。红色通知部分是问题。我不知道为什么“导航”没有附加到标题。我将填充应用为 0 px。谁知道如何解决问题?还是我误解了填充?谢谢你的回答。

我的 html 源代码如下。

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}

header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}

nav {
float: left;
max-width: 160px;
margin: 0;
padding: 0em;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
padding : 25px;
border : 1px solid gray;
background-color:orange;
}

nav ul a {
text-decoration: none;
}

article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 0px;
overflow: hidden;
}
</style>

</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>

<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>

<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has beeon a major settlement for two millennia, it's history going back to its founding by the Romans, who named it Londinium.</p>
</article>

<footer>Copyright ? W3Schools.com</footer>

</div>
</body>
</html>

最佳答案

你的导航是使用 ul 标签构建的,它默认设置了 margin 属性

这应该可以解决您的问题:

nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}

另外,请记住 0 不应该与单位一起使用(这是一个很好的做法)

关于html - 填充不会在 html 中消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38432831/

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