<ul style="float:left"><li class="lili"> <a href="Left.aspx?type=214" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">对标系统</span></a> </li> <li class="lili"> <a href="Left.aspx?type=225" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">绩效考核</span></a> </li> <li class="lili"> <a href="Left.aspx?type=235" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">内部数据</span></a> </li> <li class="lili"> <a href="Left.aspx?type=239" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">外部数据</span></a> </li> <li class="lili"> <a href="Left.aspx?type=59" target="leftFrame" class="imageA"><span style="Letter-spacing :1px; position:relative; color:#900;">系统管理</span></a> </li> </ul>
上面这段代码中,想让a标签中的文字居中,需要设置li标签的line-height 和height属性;
<style type="text/css"> .imageA { background-image:url(../App_Themes/DefaultTheme/images/top_nav.jpg); background-repeat:no-repeat; display:block; 110px; height:29px; text-align:center; font-size:14px; color:#900; font-weight:bold; } .lili { display:block; 110px; height:29px; line-height:31px; float:left } </style>
有时候li 标签 水平显示(style=“float:left”),它的外面一层 的高度可能比它高一些。为了让它里面的a标签的文字居中,就需要把它的行高设置成和它外层的行高一样高就可以了!