Html 将 <td> 表元素拆分为左对齐和右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9611653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Split a <td> table element into LEFT and RIGHT justified
提问by Asher
Whats the best way to split up a table element <td>? I don't really want to use nested tables. I need the internal element to have two elements one that is left justified and the other to be right justified with no border.
拆分表格元素的最佳方法是什么<td>？我真的不想使用嵌套表。我需要内部元素有两个元素，一个是左对齐的，另一个是右对齐的，没有边框。
For example:
例如：
<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>
any other ways to do this besides the following?
除了以下方法之外，还有其他方法可以做到这一点吗？
<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>
I want the internal element to be a <span>or whatever is best for this.
我希望内部元素是 a<span>或任何最适合此的元素。
回答by operation1053
<table>
<tr>
<td>
<div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
</td>
</tr>
</table>
回答by Jeremy Holovacs
I would do something like:
我会做这样的事情：
<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>
then my css would resemble:
那么我的 css 将类似于：
td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}
... or something along those lines.
... 或类似的规定。
回答by Travis J
You could do it like this, although spans and divs are much better imo.
你可以这样做，虽然跨度和 div 是更好的 imo。
<table width="100%">
<tr width="100%">
<td width="100%">
<span style="float:left;">left</span>
<span style="float:right;">right</span>
</td>
</tr>
</table>
回答by user3413723
The floats didn't seem to look right so I used flexbox:
浮点数看起来不太对，所以我使用了 flexbox：
https://jsfiddle.net/6rc8w709/
https://jsfiddle.net/6rc8w709/
.td-content{
display:flex;
}
.child{
flex:1;
}
.right{
text-align:right;
}
HTML:
HTML：
<table>
<tr>
<td>
<div class="td-content">
<div class="child">
LEFT
</div>
<div class="child right">
RIGHT
</div>
</div>
</td>
</tr>
</table>
回答by Benjamin Pajk
Flexbox is the right approach since it is now supported by all major browsers. This is an alternative approach if you need to target an older browsers or you don't like the drawbacks of floats. With this approach you can control the overflow of the left and right segment better and you can easily add a centered segment if you need one.
Flexbox 是正确的方法，因为现在所有主要浏览器都支持它。如果您需要针对较旧的浏览器或不喜欢浮动的缺点，这是一种替代方法。通过这种方法，您可以更好地控制左右段的溢出，如果需要，您可以轻松添加居中的段。
CSS:
CSS：
table{
width: 100%;
}
.container{
width: 100%;
display: table;
}
.cell{
display: table-cell;
}
.cell .left{
text-align: left;
}
.cell.right{
text-align: right;
}
HTML:
HTML：
<table>
<tr>
<td>
<div class="container">
<span class="cell left">LEFT</span>
<span class="cell right">RIGHT</span>
</div>
</td>
</tr>
</table>
