gpt4 book ai didi

html - 在导航栏、li 和标签中填充

转载 作者:太空宇宙 更新时间:2023-11-04 11:15:18 24 4
gpt4 key购买 nike

我正在学习 css,我对导航栏中的填充有点困惑。

#menu ul {
height: auto;
padding: 15px 3px;
margin: 0px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu a {
text-decoration: none;
color:white;
padding: 3px 3px 3px 3px;
}

我怎么看到 ul 填充相对于边框移动了所有 ul 元素,但我很困惑填充 li 和标签到底做了什么?因为我如何理解 padding 是 href 标签之间的空间,但是 li 中的 padding 是什么?

html:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head
<title>J</title>
<style>
body {
background-image: url('http://androidwallpape.rs/content/02-wallpapers/73-rainynight/wallpaper-1968153.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
h1{
color:white;
test-align:center;
}
p {
color:white;
test-align:right;

}
img {

float: center;

}
#menu {

width: 550px;
height: 45px;
float:right;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #336666 ;
background-color: #505050 ;
border-radius: 10px;
}
#menu ul {
height: auto;
padding: 15px 3px;
margin: 0px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu a {
text-decoration: none;
color:white;
padding: 3px 3px 3px 3px;
}
#menu a:hover {
color: black;
background-color: #FFF;
}

</style>

<body>

<div id="menu">
<ul>
<li><a href="sajt.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<h1>JJc</h1>
<p>nesjxjxjjx</p>
<img src="me.jpg">
</body>
</html>

最佳答案

填充是内容周围的空间。

Boxe Model Example

关于html - 在导航栏、li 和标签中填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33286831/

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