Question

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

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

以下是问题代码的小提琴：http://jsfiddle.net/7f9aX/

Answer 1

你给display:block一个标签，即#portfolioLogo，所以它作为一个div工作，所以它继承了它的父宽度，所以它被视为全宽div，这就是为什么sortMenu div不与标志。

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

Answer 2

我使用display:inline-block：

#menu {
    white-space:nowrap; /* prevent items from bumping down */
}
#menu > * {
    display:inline-block;  /* display items as box; wrap items as text */
    vertical-align:bottom; /* vertically align objects (feel free to change) */
    white-space:normal;    /* restore whitespace normally */
    float:none;            /* no need to float */
}

如果您将其粘贴到小提琴的底部，它应该可以正常工作。

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

2 个答案: