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