css链接自动保证金到更大的链接

Question

我遇到以下问题：

a标签会自动对齐较大标签的底部。 我想知道为什么以及我能做些什么来反对它。

这是我的代码：

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

#navigation {
  background-color: #760209;
  width: 100%;
  height: 55px;
}

#navigation a {
  text-decoration: none;
  color: #FFF;
  /*line-height: 55px;*/
}

#navigation .logo {
  font-size: 28px;
  font-weight: bold;
}

<div id="navigation">
  <div class="container_12">
    <a class="logo" href="#">test1</a>
    <a class="btn" href="#">Mein Profil</a>
    <a class="btn" href="#">Fragen</a>
  </div>
</div>

Answer 1

对vertical-align

进行<a>

#navigation a {
    text-decoration: none;
    color: #FFF;
    /*line-height: 55px;*/
    vertical-align:middle; //This line over here
}

Answer 2

您可以添加：

.btn{
   vertical-align:top; 
}

如果你需要将它们对齐到顶部。

vertical align的默认值为 baseline ，这意味着该元素将与父元素的基线对齐。

这就是为什么在你的情况下，其他2个链接似乎与第一个元素相比底部对齐，只是因为字体大小不同。

Answer 3

您需要vertical-align css属性 您可以使用vertical-align: middle;或vertical-align: top;

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

#navigation {
  background-color: #760209;
  width: 100%;
  height: 55px;
}

#navigation a {
  text-decoration: none;
  color: #FFF;
  vertical-align: middle; /*  <-------  */
}

#navigation .logo {
  font-size: 28px;
  font-weight: bold;
}

<div id="navigation">
  <div class="container_12">
    <a class="logo" href="#">test1</a>
    <a class="btn" href="#">Mein Profil</a>
    <a class="btn" href="#">Fragen</a>
  </div>
</div>