0

我有一个没有设置宽度的容器 div，其中包含一个可变宽度的表格，以及表格下方的一个按钮。我希望这个按钮浮动在右侧，使其右边缘与桌子的右边缘对齐。执行以下操作似乎在所有浏览器中都可以正常工作，但 IE<=7。这是如何正确完成的？

<head>
    <style>
#tableContainer {
    float: left;
}
#btn {
  float: right;
}

    </style>
</head>
    <body>
        <div id="tableContainer">
            <table>
                <tr>
                    <td>a b c</td>
                    <td>a b c</td>
                    <td>a b c</td>
                    <td>a b c</td>
                </tr>
            </table>
            <button id="btn">buttontext</button>
        </div>
    </body>
</html>

这是我想要的说明：

__________________
|                |
|       table    |
|________________|
             |btn|
             ‾‾‾‾‾
4

3 回答 3

0

你能把按钮从div里拿出来吗？那应该可以解决您的问题。

否则，添加float:left（#tableContainer table不推荐）

您还可以将表格包装到另一个 div 中，并将该 div 浮动到左侧

另外，您必须将按钮移到表格之前

于 2013-04-05T05:04:48.100 回答
0

我希望这就是你的意思..

    #tableContainer {
        float:left;
    }
    #btn {
        position:relative;
        left:0;
        right:0;
        float:right;
    }

工作小提琴

要不然

    #tableContainer {
        float:left;
        display: inline;
    }
    #btn {
        float:right;
        display: inline;
    }
于 2013-04-05T05:18:25.973 回答
0

好的，我最终制定的一个解决方案如下：

<head>
    <style>
#tableContainer {
    float: left;
}
#btncontainer {
  text-align: right;
}

    </style>
</head>
    <body>
        <div id="tableContainer">
            <table>
                <tr>
                    <td>a b c</td>
                    <td>a b c</td>
                    <td>a b c</td>
                    <td>a b c</td>
                </tr>
            </table>
    <div id="btncontainer">
                <button>buttontext</button>
    </div>
        </div>
    </body>
</html>

我们在这里所做的是创建一个按钮容器并在其上设置“text-align:right”。或者，我们可以跳过 btn-container 并将 text-align 放在 table-container 中，假设没有其他元素需要在左侧（这不会影响表格的定位方式，只要它比按钮更宽我的情况。

对我来说，使用 text-align 来对齐按钮确实感觉不合逻辑。对此有何评论？

于 2013-04-06T13:07:03.627 回答