Question

我有一个没有设置宽度的container-div，它包含一个可变宽度的表，还有一个位于表下方的按钮。我希望这个按钮在右侧浮动，使其右边缘与桌子的右边缘对齐。做类似以下的事情似乎在所有浏览器中工作正常，但IE＆lt; = 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|
             ‾‾‾‾‾

Answer 1

你可以从div中取出按钮吗？这应该可以解决你的问题。

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

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

另外，你必须在表格之前移动按钮

Answer 2

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

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

<强> Working Fiddle

或

    #tableContainer {
        float:left;
        display: inline;
    }
    #btn {
        float:right;
        display: inline;
    }

Answer 3

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

<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来对齐按钮确实感觉非常不合逻辑。对此有何评论？

在IE <= 7中将包含父级的元素浮动到具有可变宽度的内部

3 个答案: