效果如图：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="reset.css"/> <style> .hotsearch{ margin: 50px auto; } .hotsearch dd{ float: left; line-height: 24px; border: 1px solid #a8a8a8; margin-right: 30px; overflow: hidden; text-align: center; width: 4em; /*这个值是看最长能显示几个文字，如x，则为x em*/ margin-top: 5px; } .hotsearch dd a{ color: #a8a8a8; display:block; } .w2{ letter-spacing:2em; /*如果需要y个字两端对齐，则为(x-y)/(y-1),这里是（4-2）/(2-1)=2em */ margin-right:-2em; /*同上*/ } .w3{ letter-spacing:0.5em; /*如果需要y个字两端对齐，则为(x-y)/(y-1),这里是（4-3）/(3-1)=0.5em */ margin-right:-0.5em; /*同上*/ } td{ width: 4em; margin-right:2em; text-align: justify; } </style> </head> <body> <dl class="hotsearch" style="300px;"> <dt><strong>热门搜索</strong></dt> <dd><a href="#" target="_blank" ref="nav" class="w3">电视机</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w4">性感漂亮</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w3">高跟鞋</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w2">手机</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w2">对齐</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w3">牛仔裤</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w4">小家碧玉</a></dd> <dd><a href="#" target="_blank" ref="nav" class="w2">家居</a></dd> </dl> </body> </html>