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

Web程序数据库 Web程序数据库 主题:1214 回复:2505

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

虐人心 发布于 2016-12-11 字数 912 浏览 1160 回复 2

求教
我要做的事如图所示
其中一行代码
<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蓝色的背景显示不全,只有我的文件夹有背景不换行
不删的话换行

请输入图片描述

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(2

清晨说ぺ晚安 2017-04-20 2 楼

这个不是很简单的嘛,你只要给你“我的文件夹”、“编辑”、“删除”设计宽度就行了呀,再说了,你这几个字的宽度是固定的,又不是可变的,然后给他们加一个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>

夜无邪 2017-03-10 1 楼

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

方法,用for循环遍历.