gpt4 book ai didi

html - CSS 中的定位和边距

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

我目前正在努力提高我在 CSS 方面的技能,但目前进展不顺利哈哈。我正在尝试在导航栏在 Logo 旁边添加一个框,但是当我尝试将带有边距的框垂直居中时,它只是在上方添加了额外的空白>导航栏?

基本上我只想学习如何将元素并排放置。另外,如果您能编辑任何您发现错误的内容,我们将不胜感激!

@import url(http://fonts.googleapis.com/css?family=Righteous);
* {
padding: 0;
margin: 0;
}
body {
height: 100%;
background-color: #ECF0F1;
}
#navigation-bar {
height: 50px;
max-width: 100%;
margin: 0 auto;
background-color: #2C3E50;
border-bottom: 2px #2980B9 solid;
position: relative;
}
.logo {
font-size: 28px;
font-family: "Righteous";
line-height: 50px;
left: 15px;
color: #E74C3C;
float: left;
width: 0px;
position: absolute;
}
.menu {
width: 400px;
height: 35px;
background-color: #ECF0F1;
margin: 20px auto;
}
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
<div id="navigation-bar">
<div class="logo">
Dewkatii
</div>
<div class="menu">
</div>
</div>
</body>

</html>

最佳答案

您可以添加 padding-top在你里面#navigation-bar并使用 margin:0px auto在你里面.menu .这是一个有效的解决方案,必须有更好的

关于html - CSS 中的定位和边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31961937/

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