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

概述我有两个菜单：一个在最顶层,另一个在它下面.我不能让两个菜单正确地对齐在右边.我想垂直对齐每个菜单项的最后一个菜单项. 这是链接：http://bit.ly/1KJjaOZ CSS： #header-text { float: left; border-radius: 25px; border: 1px solid #CCC; padding: 0 1em 2.35em 1em; 我有两个菜单：一个在最顶层,另一个在它下面.我不能让两个菜单正确地对齐在右边.我想垂直对齐每个菜单项的最后一个菜单项.

这是链接：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;}

解决方法 您必须重新构建代码.为某些div添加巨大的余量不是一个好的解决方案.由于顶部菜单是右对齐的,为什么不使用float：right;代替？

这是我的解决方案.建议您进行备份,因为我在技术上重做您的顶级菜单HTML和CSS样式.

HTML：

<div >  <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 >&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使用这么大的余量,因为它会在响应时破坏你的设计.希望能帮助到你！

总结

以上是内存溢出为你收集整理的html – 如何垂直对齐顶部菜单和主菜单？全部内容，希望文章能够帮你解决html – 如何垂直对齐顶部菜单和主菜单？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。