目录
单元格文字居左上显示_html/css_WEB-ITnose
Jun 24, 2016 pm 12:07 PM 如题
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;
谢了,解决了。前台的人走了,后台兼前台,完全不了解。
最近还得多麻烦各位了
没问题,没问题
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>ul.menu { display: block; 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;}</style></head><body> <ul class='menu'> <li> <table border="1"> <caption>1111Monthly savings</caption> <tr> <td>1Monthfffffffff</td> <td>1Savings</td> </tr> <tr> <td>1January</td> <td>1$100</td> </tr> </table> </li> <li> <table border="1"> <caption>2222Monthly savings</caption> <tr> <td>2Month</td> <td>2Savingsffffffff</td> </tr> <tr> <td>2January</td> <td>ffffff2$100</td> </tr> </table> </li> </ul> <script> </script></body></html>
登录后复制
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章
仓库:如何复兴队友
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间?
3 周前
By DDD
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
3 周前
By 王林

热门文章
仓库:如何复兴队友
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间?
3 周前
By DDD
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
3 周前
By 王林

热门文章标签

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?
