如何垂直对齐顶部和主菜单?
How to align vertically the top and main menus?
我有两个菜单:一个在最上面,另一个在它的正下方。我无法让这两个菜单在彼此的顶部正确对齐。我想垂直对齐每个菜单项的最后一个。
这是 link: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;
}
你可以使用这个class..
.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;
}
你必须重组你的代码。为某些 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"> 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 使用如此大的边距,因为它会在响应时破坏您的设计。希望对您有所帮助!
你所要做的就是添加这个 class :
.top-navigation.top-menuv2 ul {
text-align: right;
padding-right: 42px;
}
尝试将 14px 的边距添加到 "search-icon" div。 (return 之前你的菜单到之前的位置)
我有两个菜单:一个在最上面,另一个在它的正下方。我无法让这两个菜单在彼此的顶部正确对齐。我想垂直对齐每个菜单项的最后一个。
这是 link: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;
}
你可以使用这个class..
.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;
}
你必须重组你的代码。为某些 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"> 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 使用如此大的边距,因为它会在响应时破坏您的设计。希望对您有所帮助!
你所要做的就是添加这个 class :
.top-navigation.top-menuv2 ul {
text-align: right;
padding-right: 42px;
}
尝试将 14px 的边距添加到 "search-icon" div。 (return 之前你的菜单到之前的位置)