Question

我遇到了一个重大问题，我似乎没有解决。我正在尝试将徽标（文本）和导航栏（文本）水平对齐，但是当它完成时，似乎它没有对齐，导航栏与徽标保持在同一条线上。

任何人都可以帮助我吗？

#navbar {
  width: 100%;
  margin: 0px auto;
}
#logo {
  width: 40%;
  float: left;
  margin: 0px;
  padding: 0px;
}
#navbar-links {
  width: 40%;
  float: right;
  margin: 0px;
  padding: 0px;
  list-style: none;
}
#navbar-links ul {
  width: 40%;
  padding: 8px 0px;
  margin: 0px;
  float: right;
}
#navbar-links li {
  display: inline;
  padding: 0px;
}
#navbar-links li a:link {
  color: #000000;
  text-decoration: none;
}
#navbar-links li a:visited {
  color: #000000;
  text-decoration: none;
}
#navbar-links li a:hover {
  color: #c3c3c3;
  text-decoration: none;
}
#navbar-links li a:active {
  color: #c3c3c3;
  text-decoration: none;
}

<div id="navbar">
  <div id="Logo">
    <h1>NUMBERS</h1>
  </div>
  <div id="navbar-links">
    <ul>
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#">Two</a>
      </li>
      <li><a href="#">Three</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

在#navbar-links：

之前重新定位#Logo

#navbar {
  width: 100%;
  margin: 0px auto;
}
#logo {
  width: 40%;
  float: left;
  margin: 0px;
  padding: 0px;
}
#navbar-links {
  width: 40%;
  float: right;
  margin: 0px;
  padding: 0px;
  list-style: none;
}
#navbar-links ul {
  width: 40%;
  padding: 8px 0px;
  margin: 0px;
  float: right;
}
#navbar-links li {
  display: inline;
  padding: 0px;
}
#navbar-links li a:link {
  color: #000000;
  text-decoration: none;
}
#navbar-links li a:visited {
  color: #000000;
  text-decoration: none;
}
#navbar-links li a:hover {
  color: #c3c3c3;
  text-decoration: none;
}
#navbar-links li a:active {
  color: #c3c3c3;
  text-decoration: none;
}

<div id="navbar">
  <div id="navbar-links">
    <ul>
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#">Two</a>
      </li>
      <li><a href="#">Three</a>
      </li>
    </ul>
  </div>
  <div id="Logo">
    <h1>NUMBERS</h1>
  </div>
</div>

Answer 2

不要使用float作为布局，那么你可以简单地使用vertical-align属性。

#logo,
#navbar-links {
  display: inline-block;
  margin-right: -.25em // If you are not compressing html
  vertical-align: middle;
  width: 50%; //adjust to taste.
}

#navbar-links {
  text-align: right;
}

Answer 3

你面临的问题非常简单......

你在HTML中有id＆＃34; Logo＆＃34;在css中它是＆＃34; logo＆＃34;。因此，由于区分大小写，浏览器不会将CSS连接到HTML。

#Logo { //Its case sensitive so not "logo"
  width: 40%;
  float: left;
  margin: 0px;
  padding: 0px;
}

您可以参考此链接for the code correction

CSS：垂直对齐两个内部div

3 个答案: