gpt4 book ai didi

html - margin-bottom 和 padding-bottom 的问题

转载 作者:行者123 更新时间:2023-11-28 10:29:41 26 4
gpt4 key购买 nike

我是第一次尝试设计网站。我正在尝试在右侧设置一种导航栏,但我无法正确定位它。当我使用边距或填充时,只有边距和填充适用于顶部、右侧和左侧。当我尝试使用 padding-bottom 或 margin-bottom 来更好地居中时,没有任何反应。任何帮助将不胜感激!

这基本上就是我要模拟的导航栏:http://pixelbot.ro/

我的 HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="../CSS/Reset.css" />
<link rel="stylesheet" href="../CSS/main.css" />
<link rel="shortcut icon" href="../Img/icon.png" />
<title>Title</title>
</head>
<body>
<div class="nav">
<h1 class="header">testheader</h1>
<ul class="navbar">
<li class="navbar"><a href="http://www.twitter.com" class="navitem">Twitter</a></li>
<li class="navbar"><a href="http://www.facebook.com" class="navitem">Facebook</a></li>
<li class="navbar"><a href="http://www.github.com" class="navitem">GitHub</a></li>
<li class="navbar"><a href="http://www.com" class="navitem">Home</a></li>
</ul>
</div>
</body>
</html>

和我的 CSS:

body {

}

.header {
color: white;
font-family: Myriad Pro;
margin-top: .5em;
margin-left: 2em;
font-size: 3em;
}

.nav {
position: absolute;
width: 100%;
height: 6em;
background: #353535;
}

.navbar {
position: relative;
display: block;
float: right;
padding-left: 30px;
}

.navitem {
margin: 30px;
text-decoration: none;
color: white;
padding: .5em;
text-align: center;
vertical-align: middle;
}

最佳答案

DEMO

  • 不要保留你的.header类 block 元素(div默认设置为display:block),它会强制其他元素掉落变化它到 display:inline-block 这样它就不会占据全宽度。

  • 使用 margin-bottom:margin-top: 属性设置边距并注意顶部和底部元素的相等边距不会导致元素位于准确的中心,因为字体行高通常从底部开始,然后从顶部开始。

CSS:

.header {
color: #FFFFFF;
display: inline-block;
font-family: Myriad Pro;
font-size: 3em;
line-height: 1em;
margin-bottom: 22px;
margin-left: 2em;
margin-top: 0.5em;
}
.nav {
background: none repeat scroll 0 0 #353535;
position: absolute;
width: 100%;
min-width: 980px;
}
.navbar {
display: block;
float: right;
margin-top: 18px;
padding-left: 30px;
position: relative;
}
.navitem {
color: #FFFFFF;
margin: 30px;
padding: 0.5em;
text-align: center;
text-decoration: none;
vertical-align: middle;
}

关于html - margin-bottom 和 padding-bottom 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23585726/

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