gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 15:10:39 25 4
gpt4 key购买 nike

我有一个这样的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com