CSS3-3个a 连接怎么排在一行

Question

求教
我要做的事如图所示
其中一行代码
<dd>
<a href="#" id="edit" >编辑</a>
<a href="#" id="del">删除</a>
<a href="javascript:;" rel="#" class="on"/>我的文件夹</a>
</dd>
.list dd{line-height:33px;border-bottom:1px dashed #dfdfdf;}
.list dd a{font-size:12px;padding-left:5px;height:29px;display:block; color:#505050;}
.list dd #edit{float:right;color:#a2a2a2;}
.list dd #del{float:right;color:#a2a2a2;}
.list dd a:hover{background:url(../images/w.png) -221px -47px no-repeat;}
.list dd a.on:link,.list dd a.on:visited{background:url(../images/w.png) -221px -7px no-repeat;color:#fff;}

现在问题是删除display:block蓝色的背景显示不全，只有我的文件夹有背景不换行
不删的话换行

Answer 1

这个不是很简单的嘛，你只要给你“我的文件夹”、“编辑”、“删除”设计宽度就行了呀，再说了，你这几个字的宽度是固定的，又不是可变的，然后给他们加一个float:left;完全可以啊，也不用去掉display:block;

<style>
.list dd{line-height:33px;border-bottom:1px dashed #dfdfdf;}
.list dd a{font-size:12px;padding-left:5px;height:29px;display:block; color:#505050;}
.list dd #myfolder{float:left;color:#a2a2a2; width:70px;}
.list dd #edit{float:left;color:#a2a2a2; width:30px;}
.list dd #del{float:left;color:#a2a2a2; widows:30px;}
.list dd a:hover{background:url(../images/w.png) -221px -47px no-repeat;}
.list dd a.on:link,.list dd a.on:visited{background:url(../images/w.png) -221px -7px no-repeat;color:#fff;}
</style>

Answer 2

你可以使用display:inline-block;zoom:1;
-------------------完--------善-------------------------
我觉得你可能要用js的onmouseover实现一下吧.css的部分只需要把你的a默认并排就可以了,然后整个dd的背景和鼠标经过的背景用onmouseover实现一下也很方便,而且不会有兼容的问题.

方法,用for循环遍历.