当前位置:首页 > 代码学苑 > 网建教程

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

来源:wordpress 作者: 2020-06-09

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



使用以下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>

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

相关栏目:
猜你喜欢
点击查看更多