Question

我有两个菜单：一个位于最顶层，另一个位于其下方。我不能让两个菜单正确地对齐在右边。我想垂直对齐每个菜单项的最后一个菜单项。

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使用这么大的余量，因为它会在响应时破坏你的设计。希望它有所帮助！

Answer 2

您需要做的就是添加这个类：

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

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

Answer 4

尝试将14px的边距添加到＆＃34;搜索图标＆＃34; DIV。（在执行此操作之前将菜单返回到先前的位置）

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

4 个答案: