垂直对齐无序列表导航链接? [英] Vertical Align Unordered List Nav Links?
本文介绍了垂直对齐无序列表导航链接?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我看到这个问题已经问了很多遍了,但是我认为我的情况略有不同。
I see that this question has been asked many times but I think my case is slightly different.
我正在研究的网站的导航结构是像这样的无序列表:
The navigation for the site I am working on is constructed with an unordered list like so:
<div class="nav_root nav_area_top">
<ul class="nav_root_wrap">
<li class="nav_parent first">
<a href="california.providence.org/torrance/pages/Locations.aspx">
Locations
</a>
</li>
<li class="nav_parent first">
<a href="california.providence.org/torrance/pages/Locations.aspx">
Health Services
</a>
</li>
</ul>
</div>
...
.nav_area_top ul.nav_root_wrap > li
{
background-image: url(../images/vert_bg_blue.jpg);
background-color: #0C83BB;
padding: 4px 15px 4px 15px;
float: left;
font-size: 13px;
margin-left: 3px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
min-height: 36px;
text-align: center;
border: 0px;
}
.nav_area_top ul.nav_root_wrap > li > a
{
color:#fff;
padding: 0px;
line-height: 18px;
}
将其渲染为:
Which renders to:
如您所见,某些导航项是一行并且一些是两个。
As you can see some of the nav items are one line and some are two.
我是否可以垂直对齐:在一个订单项的中间对齐?
推荐答案
添加此样式(必要时覆盖)
add this style (override if necessary)
.nav_area_top ul.nav_root_wrap > li {
line-height: 36px;
}
.nav_area_top ul.nav_root_wrap > li > a {
line-height: normal; /* or just choose another value: e.g. 1.5; */
vertical-align: middle;
display: inline-block;
*zoom: 1;
*display: inline;
}
最后两个属性是 IE< 8
正确呈现 inline-blocks
元素
last two properties are inline hacks necessary for IE<8
to properly render inline-blocks
element
这篇关于垂直对齐无序列表导航链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文