我想在 td
中水平对齐三个 div
。
我还想更改下图中的 A
和 B
的 div
:
重要的是,A
位于 SecondOne
的左侧,B
位于其右侧。我也使用了 span
但它不起作用。
<table>
<tr>
<td>
<div style="width: 55px; background: yellow; margin-left: 50px;">
FirstOne
</div>
</td>
<td>
<div style="width: 11px; background: red; margin-left: 50px">
A
</div>
<div style="width: 75px; background: green; margin-left: 50px;">
SecondOne
</div>
<div style="width: 11px; background: red; margin-left: 50px">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>
</tr>
</table>
最佳答案
将 div
设置为 display:inline:block
不要使用内联样式。
.table-divs {
font-size: 0;
/*fix inline-block gap*/
border: 1px dashed red
}
.table-divs div {
display: inline-block;
font-size: 16px
/* set font-size again */
}
.table-divs td:nth-of-type(2) {
padding: 0 50px
}
.first {
width: 55px;
background: yellow;
}
.second {
width: 75px;
background: green;
}
.third {
width: 65px;
background: blue;
}
.a,
.b {
width: 11px;
background: red;
}
<table class="table-divs">
<tr>
<td>
<div class="first">
FirstOne
</div>
</td>
<td>
<div class="a">
A
</div>
<div class="second">
SecondOne
</div>
<div class="b">
B
</div>
</td>
<td>
<div class="third">
ThirdOne
</div>
</td>
</tr>
</table>
<hr />
<div class="a">
A
</div>
<div class="second">
SecondOne
</div>
<div class="b">
B
</div>
<div class="third">
ThirdOne
</div>
关于html - 水平对齐 <td> 中的 <div>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36741423/