tag~~

最新推荐文章于 2021-12-23 16:03:09 发布

fedawn

最新推荐文章于 2021-12-23 16:03:09 发布

阅读量436

点赞数

分类专栏：笔记 css 文章标签： class float 浏览器 ie

本文链接：https://blog.csdn.net/fedawn/article/details/7602079

版权

笔记同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

这样的文字内容不固定、数量不固定的标签结构我用了ul>li>a来写，现在看来有点小问题，不如用div>a这样结构更为零活。

下面代码的问题是在IE7与IE6下，最后一行的margin-bottom值显示不出来。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<style type="text/css">
		*{margin:0; padding:0;}
		li{list-style:none;}
		.box{width:300px; background:#ccc; margin:300px auto; padding:20px; overflow:hidden;}
		ul{overflow:hidden; height:100%; background:green; }
		li{float:left; padding:0 10px; margin:0 10px 10px 0; background:#fff; font-size:14px; white-space: normal;}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li>最炫民族风</li>
			<li>痛快</li>
			<li>好想你也在</li>
			<li>不难</li>
		</ul>
	</div>
</body>
</html>

在最后加一个有宽度标签就可以解决这个问题。但是由于是用的ul>结构，所以最后只能多加一个li清掉上面的样式，有点悲剧。

<ul>
	<li>最炫民族风</li>
	<li>痛快</li>
	<li>好想你也在</li>
	<li>不难</li>
	<li style="margin:0; padding:0; width:100%; height:0; overflow:hidden;"></li>
</ul>

如果用其他结构

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<style type="text/css">
		*{margin:0; padding:0;}
		.box{width:300px; background:#ccc; margin:300px auto; padding:20px; overflow:hidden;}
		.tag-list{overflow:hidden; height:100%; background:green; }
		a{float:left; padding:0 10px; margin:0 10px 10px 0; background:#fff; font-size:14px; white-space: normal;}
	</style>
</head>
<body>
	<div class="box">
		<div class="tag-list">
			<a href="">最炫民族风</a>
			<a href="">痛快</a>
			<a href="">好想你也在</a>
			<a href="">不难</a>
			<div style="clear:both;"></div>
		</div>
	</div>
</body>
</html>

最后再说一下：white-space与word-wrap。

white-space:normal 默认空白被浏览器忽略掉；

white-space:nowrap文字不会换行，文本在同一行上继续显示，直到遇到br为止。

word-wrap:normal 不换行；

word-wrap:break-word 换行.如果需要，单词内部允许断行。