我希望在div
中水平对齐三个td
。
我还想更改下面图片中div
和A
的{{1}}:
B
左侧A
和SecondOne
位于其右侧非常重要。我也使用B
,但它没有用。
span

答案 0 :(得分:2)
将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>
&#13;
答案 1 :(得分:1)
将其添加到中间3个div的样式部分:
float: left;
所以它变成了:
<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; float: left;">
A
</div>
<div style="width: 75px; background: green; margin-left: 50px;float: left;">
SecondOne
</div>
<div style="width: 11px; background: red; margin-left: 50px;float: left;">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>
答案 2 :(得分:1)
答案 3 :(得分:1)
用户“float:left”将div放在左侧并删除“margin-left”为secondOne和B
<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;float: left;">
A
</div>
<div style="width: 75px; background: green; float: left;">
SecondOne
</div>
<div style="width: 11px; background: red;float: left;">
B
</div>
</td>
<td>
<div style="width: 65px; background: blue; margin-left: 50px;">
ThirdOne
</div>
</td>
</tr>
</table>
答案 4 :(得分:0)
试试这个
<td>
<div style="width: 11px;background: red;margin-left: 50px;float: left;">
A
</div>
<div style="width: 75px;background: green;float: left;">
SecondOne
</div>
<div style="width: 11px;background: red;float: left;">
B
</div>
</td>