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

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

- User014019

Answer 1

你需要重构你的代码。给某些div添加大量的margin不是一个好的解决方案。由于你的顶部菜单是右对齐的，为什么不使用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中使用如此巨大的边距，因为这会破坏响应式设计。希望这能帮到你！

- sandalkoyak

Answer 2

你所要做的就是添加这个类：

.top-navigation.top-menuv2 ul {
    text-align: right;
    padding-right: 42px;
}

- Siddharth Thevaril

Answer 3

你可以使用这个类...

.top-menuv2 {
   display: inline-block;
   margin: 10px 0 0 0;
 }
 .top-menuv2 ul {
   list-style-type: none;
   margin: 10px 20px 0 30px;
   font-size: 0.80em;
   float: none;
   display: inline-block;
 }

- narendra.lodhi

Answer 4

尝试将左边距设置为14像素，应用于“search-icon” div。（在执行此操作之前，请将菜单返回到以前的位置）

- user5683483