将导航菜单与徽标对齐

Question

我可能对基本 CSS 有一些理解上的问题，但是，即使通过查看其他线程，我也无法摆脱这个问题。我已经意识到 vertical-align 只适用于行内元素，这很好。但是当我实际尝试将菜单垂直对齐到其徽标左侧时，会出现一些问题。我仍然认为这个问题是由浮动元素和位置属性引起的，这对我来说是一个巨大的理解问题，但我希望有人能帮助我解决这个问题，因为它开始有点烦人了。

HTML:

<body>
<div id="container">
  <div id="logo">
    <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png"
  </div>
  <div id="nav-container">
    <ul id="navbar">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>
   </div>

  </div>
</body>

CSS:

body {
  margin: 0;
  padding; 0;
}
#container {
  margin: auto;
  width: 960px;
}
#nav-container {
  margin: 0;
  width: 750px;
  float: right;
  border:1px black dashed;
  height: 200px;
}
ul#navbar {
  margin: 20px;
  padding: 0;
  list-style: none;
}
ul#navbar > li {
  display: inline;
  vertical-align: bottom;
}
ul#navbar > li > a {
  padding: 5px;
  display: block;
  text-decoration: none;
  font-size: 25px;
  text-align: center;
  float: left;
  border-right: 1px black solid;
}
ul#navbar > li > a:hover {
  background-color: RoyalBlue;
}
ul#navbar > li > a > p{
  vertical-align: bottom;
}

我的笔： http://codepen.io/Rej/pen/egKYEa

Answer 1

首先应该对 HTML 和 CSS

进行一些修改

1- 图片标签 img 未关闭等缺失 />

2-需要在导航中浮动的元素是lis而不是as 所以我在 css.

中更改了它

3- 徽标容器是 div 标签，它是内联标签，所以我添加了 display:inline-block

4- 徽标图像包含空白 space，这使其不适合测试我通过 placeholder

替换它

5- 要对齐菜单，您可以使用 sudo element after 和 vertical-align:middle

查看下面的演示

body {
  margin: 0;
  padding; 0;
}
#container {
  margin: auto;
  width: 960px;
}
#nav-container {
  margin: 0;
  width: 750px;
  float: right;
  border:1px black dashed;
  height: 200px;
}
ul#navbar {
  margin: 20px;
  padding: 0;
  list-style: none;
  display: inline-block;
  vertical-align: middle;
}
ul#navbar:after{
  content:'';
  display:table;
  clear:both;
}
ul#navbar > li {
  display: inline;
  vertical-align: bottom;
  float: left;
  
}
ul#navbar > li > a {
  padding: 5px;
  display: block;
  text-decoration: none;
  font-size: 25px;
  text-align: center;
  border-right: 1px black solid;
}
ul#navbar > li > a:hover {
  background-color: RoyalBlue;
}
ul#navbar > li > a > p{
  vertical-align: bottom;
}
#logo{
  display:inline-block;
}
div#nav-container:after {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

<body>
  <div id="container">
    <div id="logo">
      <img src="https://placehold.it/200x200"/>
    </div>
    <div id="nav-container">
      <ul id="navbar">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
  </div>
 
      </div>
</body>

如果我 miss-understand 你的问题

请留下反馈

Answer 2

希望对你有帮助，我实际上把图片位置改成了你想要的在列表后面这里有一些 css 适合您的代码需要：

body {
  margin: 0;
  padding; 0;
}
#container {
  margin: auto;
  width: 960px;
}
#nav-container {
  margin: 0;
  float: left;
  border:1px black dashed;
  height: 200px;
}

ul#navbar {
  margin: 20px;
  padding: 0;
  list-style: none;
}
ul#navbar > li {

  vertical-align: bottom;
}
ul#navbar > li > a {
  padding: 5px;
  text-decoration: none;
  font-size: 25px;
  text-align: center;
  float: left;
}
ul#navbar > li > a:hover {
  background-color: RoyalBlue;
}
ul#navbar > li > a > p{
  vertical-align: bottom;
}

你有一些 html 问题，所以在更正它们之后它看起来像：

<div id="container">

  <div id="nav-container">
    <ul id="navbar">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>
     </ul>
   </div>
     <div id="logo">
    <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png">
  </div>

  </div>

将导航菜单与徽标对齐

Aligning a Navigation Menu with a logo

css

alignment

vertical-alignment

css-float