Html 对齐<；部门>'；s in<；td>；横向

我想在

td

中水平对齐三个

div

我还想更改下图中

A

和

B

的

div

：

重要的是

A

位于

SecondOne

的左侧，而

B

位于其右侧。我也使用了

span

，但它不起作用

第一个
A.
第二
B
蒂尔多

将

div

设置为

显示：内联：块

不要使用内联样式

.table divs{
字号：0；
/*固定直列块间隙*/
边框：1px红色虚线
}
.表格分区{
显示：内联块；
字号：16px
/*再次设置字体大小*/
}
.表格divs td:n类型（2）{
填充：0 50px
}
.首先{
宽度：55px；
背景：黄色；
}
.第二{
宽度：75px；
背景：绿色；
}
.第三{
宽度：65px；
背景：蓝色；
}
A.
.b{
宽度：11px；
背景：红色；
}

第一个
A.
第二
B
蒂尔多

A.
第二
B
蒂尔多

将

div

设置为

显示：内联：块

不要使用内联样式

.table divs{
字号：0；
/*固定直列块间隙*/
边框：1px红色虚线
}
.表格分区{
显示：内联块；
字号：16px
/*再次设置字体大小*/
}
.表格divs td:n类型（2）{
填充：0 50px
}
.首先{
宽度：55px；
背景：黄色；
}
.第二{
宽度：75px；
背景：绿色；
}
.第三{
宽度：65px；
背景：蓝色；
}
A.
.b{
宽度：11px；
背景：红色；
}

第一个
A.
第二
B
蒂尔多

A.
第二
B
蒂尔多

试试这个

<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>

A.
第二
B

试试这个

<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>

A.
第二
B

将此添加到中间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>

第一个
A.
第二
B
蒂尔多

---

将此添加到中间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>

第一个
A.
第二
B
蒂尔多

下面是工作小提琴

下面是工作小提琴

用户“float:left”将div置于左侧，并删除secondOne和B的“margin 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; 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>

第一个
A.
第二
B
蒂尔多

用户“float:left”将div置于左侧，并删除secondOne和B的“margin 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; 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>

第一个
A.
第二
B
蒂尔多

这正是我所需要的，因为我想将A和B连接到中心框。谢谢10分钟后，我会记为正确答案太棒了！很高兴这有帮助！：）这正是我所需要的，因为我想把A和B连接到中间的盒子上。谢谢10分钟后，我会记为正确答案太棒了！很高兴这有帮助！：）非常感谢你的帮助，但是Pietro Lerro的那个更像我想要的。再次感谢。这很好，但我的页面中还有其他div，它们不应该是内联块。所以我认为他的回答是正确的。但你的也是真的helpful@reshad然后只需使用继承和特异性就可以针对这些div。我会更新我的答案非常感谢你的帮助，但是Pietro Lerro的答案更像我想要的。再次感谢。这很好，但我的页面中还有其他div，它们不应该是内联块。所以我认为他的回答是正确的。但你的也是真的helpful@reshad然后只需使用继承和特异性就可以针对这些div。我会更新我的答案