用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>
可使用“在线运行代码”工具测试效果: