html - 如何垂直对齐顶部和主菜单？

Question

我有两个菜单:一个在最上面，另一个在它的正下方。我无法让这两个菜单在彼此的顶部正确对齐。我想垂直对齐每个菜单项的最后一个。

这是链接:http://bit.ly/1KJjaOZ

CSS:

#header-text {
  float: left;
  border-radius: 25px;
  border: 1px solid #CCC;
  padding: 0 1em 2.35em 1em;
  width: 15.30em;
  height: 2em;
  margin: 0 0 0 560px;
}
.top-menuv2 ul {
  list-style-type: none;
  margin: 10px 20px 0 90px;
  font-size: 0.80em;
  float: none;
}
.top-menuv2 li {
  display: inline-block;
  position: relative;
}
.top-menuv2 ul li {
  display: inline;
  margin-left: 20px;
  font-family: 'Open Sans Bold', sans-serif;
  line-height: 1.8;
}

Answer 1

你必须重组你的代码。为某些 div 添加巨大的边距不是一个好的解决方案。既然你的顶部菜单是右对齐的，为什么不使用 float: right; 呢？

这是我的解决方案。建议您进行备份，因为我在技术上重做了您的顶部菜单 html 和 css 样式。

HTML:

<div class="top-navigation top-menuv2">
  <ul>
    <li><a href="/testEnvironment/contacts/">Contacts</a></li>
    <li><a href="/testEnvironment/our-partners/">Our Partners</a></li>
    <li><a href="/testEnvironment/careers/">Careers</a>
      <ul>
        <li><a href="/testEnvironment/careers/vacancies/">Vacancies</a></li>
        <li><a href="/testEnvironment/careers/corporate-culture/">Corporate Culture</a></li>
      </ul>
    </li>
  </ul>
  <div id="header-text">
    <div class="header-text cc">&nbsp;Customer Service 02 753 57 11</div>
  </div>
</div>

风格:

.top-menuv2 ul {
  list-style-type: none;
  margin: 15px 63px 0px 10px;
  font-size: 0.8em;
  float: right;
}

#header-text {
  border-radius: 25px;
  border: 1px solid #CCC;
  padding: 0px 1em 2.35em;
  width: 15.3em;
  height: 2em;
  float: right;
  margin: 10px 0px 0px;
}

我不会为我的 div 使用如此大的边距，因为它会在响应时破坏您的设计。希望对您有所帮助!