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

html – 如何垂直对齐顶部菜单和主菜单?,第1张

概述我有两个菜单:一个在最顶层,另一个在它下面.我不能让两个菜单正确地对齐在右边.我想垂直对齐每个菜单项的最后一个菜单项. 这是链接: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 – 如何垂直对齐顶部菜单和主菜单?所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1061662.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存