Question

我试图让一个图标表与标题出现在同一行。

在下面的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>

Answer 1

把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>

Answer 2

您可以使用<thead>标记在HTML表格标题中指定值。例： http://www.w3schools.com/tags/tag_thead.asp

使表格与标题在同一行开始

2 个答案: