html - 如何让这两个div在同一高度？

Question

我正在制作一个带有投资组合 Logo (那个 dribbble Logo 只是一个占位符)和一个右对齐的选择框的简约菜单，用于按某些标签对帖子进行排序。当然，两个 div 应该在同一行上——但不知何故，选择框没有与 Logo 对齐。我做错了什么？

HTML:

<!-- MENU ------------------------>
<div id="menu">
  <a href="#">
    <img id="portfolioLogo" src="http://cdn.embed.ly/providers/logos/dribbble.png" />
  </a>

  <div id="sort">
    <div class="sortMenu">Sortieren nach
        <div class="menuLine"></div>
    </div>
    <div class="showMenu">
        <div class="menuLink">Corporate Design</div>
        <div class="menuLink">Logo</div>
        <div class="menuLink">Symbol</div>
        <div class="menuLink">Web</div>
    </div>
  </div>
</div>

CSS:

#menu {
  width: 100%;
  padding: 30px;
  background-color: #F5F5F5;
  vertical-align: center;
  position: fixed;
  border: none;
  float: left;
  top: 0;
}

#portfolioLogo {
  height: 20px;
  margin: 0 auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
  background-color: red;
}

#sort {
  margin-left:auto;
  margin-right: 0;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  font-weight: 400;
  font-size:;
  float: right;
  z-index: 1;
  background-color: yellow;
  height: 20px;
}

.sortMenu {
  text-transform: uppercase;
  letter-spacing:0.1em;
  position: relative;
  font-weight: 400;
  font-size: 15pt;
  z-index: 1;
  background-color:;
}

.menuLine {
  width: 100%;
  height: 2px;
  display: block;
  margin-top: 2.5px;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
}

.showMenu {
  display: none;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
  position: absolute;
  z-index: 2;
  background-color: white;
  opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
}

.menuLink {
  margin-top: 10px;
}
.menuLink a {
  text-decoration: none;
  font-style: normal;
  color: black;
}

.menuLink a:hover {
  border-bottom:1px dotted;
}

Javascript:

$(document).ready(function showHide() {
  $('.sortMenu').click(function showHide() {
    $('.showMenu').slideToggle("fast");
  });
});

这是问题代码的 fiddle :http://jsfiddle.net/7f9aX/

Answer 1

您将 display:block 赋予标签，即 #portfolioLogo 以便它作为 div 工作，因此它继承其父级宽度，因此它被视为全宽 div 那是为什么 sortMenu div 与 Logo 不对齐。

您可以制作两个具有 float left 属性和适当宽度的 div 来对齐它们，或者使用 inline-block 属性。