DIV+CSS代码让标题排列自适应,当行长度不够时自动排序自下一行

在做列表、菜单或者目录时,由于连接文字长短不一,通常我们会做截取一定数量的文字,来预防出现破格、错乱的情况,这样做虽然可以直接的解决问题,但在显示区域比较狭小的时候,一行内容明明可以放两个标题短的链接,却只放了一个,面积造成了不必要的浪费。这时我们只需要做一个简单的处理就可以解决问题,代码如下:

<style type="text/css">
.demo {
	width:350px;
	border: 1px solid #999999;
}
.demo ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.demo ul li {
	display:inline-block;
	padding: 0px 10px;
	margin: 0px;
}
.demo ul li a {
	white-space: nowrap;
	line-height: 2;
}
.demo ul li a:hover {
	color: #FF0000;
}
</style>

这样就解决了,下面来看看怎么运用它:

<div class="demo">
	<ul>
       <li><a title="定时关机软件" href="http://www.zhuei.net/Content.php?m=DSGJZHUEi">定时关机软件</a> </li>
       <li><a title="TimeQu" href="http://www.zhuei.net/Content.php?m=TimeQu">TimeQu</a> </li>
       <li><a title="如何在html页面里判断是否为IE浏览器" href="http://www.zhuei.com">如何在html页面里判断是否为IE浏览器</a> </li>
       <li><a title="便民啊" href="http://bianmina.com/">便民啊</a> </li>
       <li><a title="ZHUEi's 收集窝" href="http://www.zhuei.com/">ZHUEi's 收集窝</a> </li>
       <li><a title="HTML代码中按回车触发按钮click事件进行提交的解决方法" href="http://www.zhuei.com">DIV+CSS代码让标题排列自适应</a> </li>
       <li><a title="HTML代码中按回车触发按钮click事件进行提交的解决方法" href="http://www.zhuei.com">HTML代码中按回车触发按钮click事件</a></li>
	</ul>
</div>

我们来看看,最后效果如下:

发表评论

邮箱地址不会被公开。 必填项已用*标注