Question

li标签中a标签的显示问题

<ul class="item">
<li class="gpic"> <a></a> </li>
<li class="gname"><a></a></li>
<li class="gprice"><a>单价</a></li>
<li class="gamount"><a>数量</a></li>
<li class="total"><a>合计</a></li>
<li class="operate"><a>操作</a></li>
</ul>

CSS: ul.item li{
display:inline-block;
margin-left:4px;
margin-top:2px;
text-align:center;
height:50px;
}
此时,头两个li与后面的li虽然都在同一行,但却上下错开了,后面的li里的a标签的字底线与前两个li的底线一致,而后面的li却整体下挪了.
如果加上 ul.item li a{display:inline-block;}则所有li都显示在同一行,没有错开.这是为什么?

Answer 1

CSS: ul.item li{
margin-left:4px;
margin-top:2px;
text-align:center;
height:50px;
line-height:50px;
float:left;
}