Question

我目前正试图在CSS中提升自己的技能，但目前情况并不好。哈哈。我在add a box next to a logo上尝试navigation bar但是当我尝试将边框垂直居中时，只需在navigation bar上方添加额外的空白区域？

基本上我只是想学习如何将物品放在一起。此外，如果您可以编辑任何您认为错误的内容，我们将非常感激！

@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

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

Answer 2

我认为这应该有所帮助。 Haven根本没有改变很多。

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>

你只需要两个把徽标和菜单放在浮动：左边将它们对齐到左边，保留默认位置，然后按你想要的顺序放置。这解决了你的问题。

我建议你们两个看到这个链接http://www.barelyfitz.com/screencast/html-training/css/positioning/，以便更好地理解使用css的位置元素

CSS中的定位和边距

3 个答案: