<li>横排显示内容垂直居中

最新推荐文章于 2020-08-06 09:25:52 发布

野狐禅

最新推荐文章于 2020-08-06 09:25:52 发布

阅读量289

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/q420309528/article/details/84164434

版权

做一个功能是多个<li>横排显示，<li>里面是<span>

li里面有一行的有多行的，做好以后一看，缺了很多东西

不明就里，写了个html试一试是哪里的问题

原本的li的css是

	li {
		float : left;
		height : 50px;
		line-height : 50px;
		margin : 0 5px;
	}

我在写html测试时，height和line-height都没有加，结果没有问题

后来把原来的css复制下来又加了border，出来的结果是：
[img]http://img2081.poco.cn/mypoco/myphoto/20120307/13/6471440520120307131134033.jpg[/img]

<html>
<head>
<title></title>
<style style="text/javascript">
	li {
		float : left;
		border : 1px solid #000;
		height : 50px;
                line-height : 50px;
		margin : 0 5px;
	}
</style>
</script>
</head>
<body>
	<ul>
		<li>
			<span>li1</span>
		</li>
		<li>
			<span>li2 line1</span><br/>
			<span>li2 line2</span>
		</li>
		<li>
			<span>li3</span>
		</li>
	</ul>
</body>
</html>