html - html中表格和div内容之间的对齐

标签 html css

我有一个这样的 html 代码:

<html>
<head>
    <title>Title</title>
</head>
<body style="max-width: 1680px;">

    <div style="float:left; width:100%">
        <div style="overflow: auto">
            <table style="width: 100%" border="1">
                <thead>
                    <tr>
                        <th>Col 1</th>
                        <th>Col 2</th>
                        <th>Col 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Elem11-------------------------------------------------</td>
                        <td>Elem12-------------------------------------------------</td>
                        <td>Elem13-------------------------------------------------</td>
                    </tr>
                    <tr>
                        <td>Elem21</td>
                        <td>Elem22</td>
                        <td>Elem23</td>
                    </tr>
                    <tr>
                        <td>Elem31</td>
                        <td>Elem32</td>
                        <td>Elem33</td>
                    </tr>

                </tbody>
            </table>
            <div id="footer" style="width: 100%; overflow: auto;">
                <span style="width: 300px; float: left">Some footer</span>
                <span style="width: 300px">Some footer2</span>
                <span style="width: 300px; float: right;">Some footer3---------------------------------------</span>
            </div>

        </div>
    </div>
</body>
</html>

问题是出现滚动时div#footer没有正确显示,所以div#footer没有与表格的右边框对齐,但应该对齐(见下图)。如何使 div#footer 表现得好像它是表格的最后一行?如果答案只包含 CSS 命令就好了。

Unwanted space

谢谢。

最佳答案

添加text-align:right

<span style="width: 300px; float: right; text-align:right">Some footer3-------------------------</span>

DEMO

关于html - html中表格和div内容之间的对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15356052/

相关文章:

html - Span 无法识别父元素 - 重叠

javascript - 如何仅在 Blogger 的搜索页面中显示文本?

css - @font-face 在 Firefox 中不起作用

php - HTML 错误 : Display Inline-Block, 不是内联的?

javascript - 从 Excel 读取并创建图表

java - Wicket - 多次打印列表中的 getlist()

html - CSS id 在 div 中不起作用

php - Newsfeed Div 在第 2 页关闭

javascript - 如何使用css选择图像

html - 创建家庭作业并需要帮助修复背景颜色