用CSS让A链接在DIV中按块自动换行

所属栏目:常用CSS技巧 时间:2014-01-23 来源:网络 作者:不详 点击:

如网站的文字友情链接,一个链接名称会分成两行的换行,如下图:



使用以下CSS代码可实现a链接按块换行,也就是整上文字标题换行,如下图:



代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  />
<title>用CSS让A标签在DIV中按块换行 by okajax.com</title>
</head>
<body>
<style type="text/css">
#aaa { width:300px; border:1px solid #f60; line-height:180%;}
#aaa a { display: inline-block; padding-left:5px; padding-right:5px; height:50px; margin-left:30px;}  /*一:级联块;二:不能浮动,否则IE6错误;兼容IE6、IE7、FF3*/
</style>
<div id="aaa"><a href="http://www.16css.com" _fcksavedurl="#">一流资源网</a> <a href="#" _fcksavedurl="#">武汉百特教育咨询</a> <a href="#" _fcksavedurl="#">环球</a> <a href="#" _fcksavedurl="#">东莞天慧美容培训学校</a> <a href="#" _fcksavedurl="#">北京新格音乐艺术有限公司</a> <a href="#" _fcksavedurl="#">长沙朗阁雅思培训中心</a> <a href="http://www.16css.com" _fcksavedurl="#">一流资源网</a></div>
</body>
</html>

可使用“在线运行代码”工具测试效果:

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: