<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
dl,ul{ display:table; border-collapse:collapse; margin-top:20px;}
dt,dd,li{float:left; background:#ccc; border:1px solid red; padding:10px; display:table-cell;}
td{ border:1px solid red; }
table{ margin-top:20px;border-collapse:collapse;}
</style>
</head>
<body>
<dl class="re-sort">
<dt >排序:</dt>
<dd class="re-curr"><a href="#" >時間<i class="re-icon"></i></a></dd>
<dd><a href="#">人氣 <i class="re-icon"></i></a></dd>
<dd><a href="#">評分<i class="re-icon"></i></a></dd>
<dd><a href="#">精華</a></dd>
<dd><a href="#">愛美丫認證 </a></dd>
<dd><a href="#">達人</a></dd>
</dl>
<ul>
<li><a href="#">人氣 <i class="re-icon"></i></a></li>
<li><a href="#">人氣 <i class="re-icon"></i></a></li>
<li><a href="#">人氣 <i class="re-icon"></i></a></li>
<li><a href="#">人氣 <i class="re-icon"></i></a></li>
<li><a href="#">人氣 <i class="re-icon"></i></a></li>
</ul>
<table width="500" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#">人氣 <i class="re-icon"></i></a></td><td><a href="#">人氣 <i class="re-icon"></i></a></td><td><a href="#">人氣 <i class="re-icon"></i></a></td>
</tr>
<tr>
<td><a href="#">人氣 <i class="re-icon"></i></a></td><td><a href="#">人氣 <i class="re-icon"></i></a></td><td><a href="#">人氣 <i class="re-icon"></i></a></td>
</tr> <tr>
<td><a href="#">人氣 <i class="re-icon"></i></a></td><td><a href="#">人氣 <i class="re-icon"></i></a></td><td><a href="#">人氣 <i class="re-icon"></i></a></td>
</tr>
</table>
</body>
</html>加了float:left,不能邊框合併，去掉就可以了dt,dd,li{ background:#ccc; border:1px solid red; padding:10px; display:table-cell;}