我试图让图标表出现在与标题相同的行上。
在下面的HTML中，图标显示在单独的行上。
我尝试使用“ top”属性移动表，但这不是一个好的解决方案，因为在图标表和文档的其余部分之间存在一个难看的空间。我怎样才能解决这个问题？
alt text http://img541.imageshack.us/img541/9677/tableu.png
<html>
<head>
<style type="text/css">
#action-icons
{
float:right;
position:relative;
border:0;
}
</style>
</head>
<body>
<h1 class="edit">Bla bla</h1>
<table id="action-icons">
<tbody>
<tr>
<td><img width="64" height="64"/></td>
<td><img width="60" height="60"/></td>
</tr>
<tr>
<td><img width="36" height="36"/></td>
<td><img width="36" height="36"/></td>
</tr>
</tbody>
</table>
<table width="100%" class="tasksgrid">
<tbody>
<tr>
<th class='taskcell'>One</th>
<th class='taskcell'>Two</th>
</tr>
</tbody>
</table>
</body>
</html>
最佳答案
把div放在它周围：
<html>
<head>
<style type="text/css">
#action-icons
{
float:right;
position:relative;
border:0;
}
.float_left {
float:left;
}
</style>
</head>
<body>
<div class="float_left">
<h1 class="edit">Bla bla</h1>
</div>
<div class="float_left">
<table id="action-icons">
<tbody>
<tr>
<td><img width="64" height="64"/></td>
<td><img width="60" height="60"/></td>
</tr>
<tr>
<td><img width="36" height="36"/></td>
<td><img width="36" height="36"/></td>
</tr>
</tbody>
</table>
</div>
<div class="float_left">
<table width="100%" class="tasksgrid">
<tbody>
<tr>
<th class='taskcell'>One</th>
<th class='taskcell'>Two</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>