日期:2014-05-16  浏览次数:20559 次

单元格文字居左上显示
如题

ul.menu{
display: none;
position: absolute;
width: 200px;
text-align: left;
border: 1px solid #000;
background-color: #fff;
list-style: none;
z-index: 9999;
}
ul.menu table{
vertical-align: top;
line-height:18;
font-size: 9pt;
border-top: 1px solid #000;
line-height: 18px;
list-style:none;
padding-left: 20px;
overflow-y: visible;
cursor: pointer;
border: 0;
}
ul.menu table tr{
        vertical-align: top;
font-size: 9pt;
border-top: 0px solid #000;
list-style:none;
padding-left: 2px;
padding-top: 0px;
background-color: #ADD8E6;
cursor: pointer;
border: 0;
}
ul.menu table td{
vertical-align: top;
line-height:18;
font-size: 9pt;
border-top: 0px solid #000;
line-height: 18px;
list-style:none;
padding-left: 2px;
padding-top: 0px;
background-color: #ADD8E6;
overflow-y: visible;
cursor: pointer;
border: 0;
}
ul.menu table caption{

font-size: 9pt;
background-color: #ADD8E6;
border: 0;
}





为什么就不能居左上显示呢,单元格里现在是水平居中左起显示
------解决方案--------------------
虽然有很多垃圾样式,不过总体看起来没什么问题,你可以尝试给td加个高,看是否是垂直居中

正常来讲vertical-align: top;已经可以控制居上

还有就是table一般在默认样式重置的会做如此设置

table { border-collapse:collapse; } 

而border 边框会加在td上
------解决方案--------------------
我看着像是因为line-height的设置影响的。

line-height用于设置行内元素的高度,但同时也会使得行内元素的内容上下居中显示。

ul.menu table td{
    vertical-align: top;
    line-height:18;                   //你这里用了两个line-height是个什么意思啊。
    font-size: 9pt;
    border-top: 0px solid #000;
    line-height: 18px;                //不带单位和带单位的line-height可是天差地别的,注意
    list-style:none;
    padding-left: 2px;
    padding-top: 0px;
    background-color: #ADD8E6;
    overflow-y: visible;
    cursor: pointer;
    border: 0;
}


这个地方,你可以试试把line-height去掉,如果想要控制td的显示高度,可以添加display:inline-block,height:18px;这样设置。

试试,有问题再说呗。
------解决方案--------------------
line-height:18px;