在 IE<=7 中包含宽度可变的父元素内向右浮动一个元素

我有一个没有设置宽度的container-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|
             ‾‾‾‾‾

你能把按钮从div中拿出来吗?这样你的问题就解决了。

else，在#tableContainer table上添加float:left(不推荐)

你也可以将你的表格包装成另一个div，并将该div浮动到左侧

同样，你必须移动按钮到表格

我希望这就是你的意思。

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

工作小提琴

或者

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

好吧，我最终想出的一个解决方案是:

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

我们在这里所做的是创建一个button-container并在其上设置"text-align:right"。或者，我们可以跳过btn-container，在table-container中放置text-align，假设没有其他元素需要在左侧(在我的例子中，只要它比按钮宽，就不会影响表格的位置。

对我来说，使用text-align来对齐按钮确实不符合逻辑。对此有什么评论吗?

相关内容

最新更新

热门标签：