CSS 中的定位和保证金

Question

我目前正在努力提高我在 CSS 的技能，但目前进展不顺利哈哈。我正在尝试在 navigation bar 上 add a box next to a logo，但是当我尝试将带有边距的框垂直居中时，它只会在 navigation bar 上方添加额外的白色 space？

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

@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>

Answer 1

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

Answer 2

我认为这应该有所帮助。根本没有太大变化。

HTML:

<!DOCTYPE html>
<html>

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

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

</html>

CSS:

@import url(http://fonts.googleapis.com/css?family=Righteous);
 * {
  padding: 0;
  margin: 0;
}
body {
  height: 100%;
  background-color: #ECF0F1;
}
#nav-wrapper {
  height: 50px;
  width: 100%;
  background-color: #2C3E50;
  border-bottom: 2px #2980B9 solid;
}
#navigation-bar {
  height: 100%;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  background-color: #2C3E50;
  position: relative;
  overflow: none;
}
#navigation-bar div {
  float: left;
  display: inline-block;
}
.logo {
  font-size: 28px;
  font-family: "Righteous";
  line-height: 50px;
  color: #E74C3C;
}
.menu {
  width: 400px;
  height: 100%;
  background-color: #ECF0F1;
  margin-left: 25px;
}

Answer 3

我希望这是你想要的：

@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: fixed; 
  width:100%;
}
.logo {
  font-size: 28px;
  font-family: "Righteous";
  line-height: 50px;
  left: 15px;
  color: #E74C3C;
  float: left;
  width: 20%;
  padding-left: 20px;
  background-color:green
}
.menu {
  width: 50%;
  height:100%;
  background-color: black;
  float:left;
  margin-left:20px;
}

<!DOCTYPE html>
<html>

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

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

</html>

你只需要两个把标志和菜单用float:left左对齐，让它们保持默认位置，然后按照你想要的顺序放置。那解决你的问题。

我建议你们两个看到这个 link http://www.barelyfitz.com/screencast/html-training/css/positioning/ 以更多地了解 css

的位置元素

CSS 中的定位和保证金

Positioning and margin's in CSS

html

css

navigation