Question

我正在努力将div元素放在父元素中的span元素旁边。

目前元素正在显示belove span元素。我需要它显示在span元素旁边。

这是我正在使用的HTML结构：

<td>
  <a align="right"><img></a>
  <a align="right"><img></a>
  <img>
  <a><img></a>
  <span id="labelSpan">test</span>
  <div id="headerDiv" style="margin-left:150px;">
    <table><tbody><tr><td></td></tr></tbody></table>
  </div>
</td>

另外一个要求是我需要设置div元素的边距相对于父td元素而不是span元素。

请告知。

谢谢！

Answer 1

尝试：

div {
    display: inline;
}

这将使div成为跨度的内联元素，并且这两个元素将并排放置。您可能还需要更改表格的显示。

Answer 2

您可以将span设为块级元素。

示例

span { display: block; }

Answer 3

制作跨度显示行。这将它放在div旁边。或者让它显示：阻止然后浮动跨度。（浮动：左）

 span {
    display: inline-block;
 }

Answer 4

您必须执行三个事项：将<span>和<div>设置为inline-block。这将确保它们都在同一条线上。然后从<div>删除边距。最后在width添加<span>。现在，<div>与<td>的左侧完全相距 150px 。

td > span {
    display: inline-block;
    width: 150px;
}
td > div {
    display: inline-block;
}

<强>演示

Try before buy

将DIV元素放在父TD内的SPAN元素旁边

4 个答案: