Cell text is displayed in the upper left corner_html/css

Cell text is displayed in the upper left corner_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:07:50

Original

1853 people have browsed it

如题

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;}

Copy after login

为什么就不能居左上显示呢，单元格里现在是水平居中左起显示

回复讨论(解决方案)

虽然有很多垃圾样式，不过总体看起来没什么问题，你可以尝试给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;}

Copy after login

这个地方，你可以试试把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>

Copy after login