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-导航中需要浮动的元素是li而不是a 所以我在css中改变了它。

3-徽标容器是div标记，是内嵌标记，因此我添加了display:inline-block

4-徽标图片包含空白空间，因此不适合测试我通过placeholder

替换它

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

查看下面的演示

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果我错过了解你的问题，请留下反馈

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>

将导航菜单与徽标对齐

2 个答案: