如何在<span>标签内显示<div>元素？

Question

我的容器元素是一个 <span>，我想在其中显示一个 <div> 元素。如何在 <span> 中添加一个 <div> 而不使其 display: inline;？

<span>
    <div>Content goes here</div>
</span>

- Harish Kurup

---

它的目的是什么？在<span>内部放置<div>被认为是不良实践，如果适当的话，我建议您更改您的CSS。虽然可能有一个很好的理由，但这个问题没有足够的细节来回答。 - Chris Dixon

为什么要在内联元素中插入块级元素？ - Czechnology

因为我使用了span作为容器，现在我正在使用jQuery的Data Tables生成动态数据网格，其中有搜索面板和一些由DIV组成的元素，但它不起作用。我已经将DIV的显示规则更改为inline，但效果不佳。 - Harish Kurup

HTML元素并非可以随意互换。你想做的就像把内裤穿在外面一样 - 虽然你可以这么做，但它并不是很实用，人们会觉得你很好笑。 - dnagirl

Answer 1

将span标签变成display:block？这样做没有任何意义，如果需要一个块级元素，那么用div代替span更合适。 此方式也无法通过文档验证，而且在不同浏览器中的行为很难预测...

- Han Dijk

---

并不是非常有帮助，也不太准确。有点傲慢、自大或无礼，绝对没有用处。意图是有道理的。显然他想知道如何将多个 Div 放在一行中。机制才是他寻求帮助的地方，你的答案根本没有解决他的意图，所以有点浪费时间。还有一个非常好而简单的答案，在下面另一个思考周到、体贴入微的回答中已经给出了，但你没有提供。 - clearlight

在你写下这句话的时候，也就是2011年，可能还没有inline-block这个属性，但是float是有的，所以你至少可以尝试回答真正的问题。 - clearlight

如果你阅读我的回答，你会看到它说： 将 span 的显示方式改为块级元素。 - Han Dijk

@nerdistcolony 我不同意。在SO上，最好的答案是当问题显示出提问者误解规范时，提供指导和纠正。 HTML设计中最基本、核心的原则之一是内联元素不能包含块级元素，并且选择元素的使用基于语义。因此，虽然Han没有通过提供一种使OP的标记结构工作的方法来回答问题，但他做对了事情，告诉OP如何以正确 的方式去做，这远比其他重要。 - dudewad

公平地说，@HanDijk 建议他将其改为 display: block，这确实是完成该任务的一种方式。他只是给了他比他所寻求的答案更进一步的见解。 - Fata1Err0r

“inline-block” 在2011年肯定是可用的 :) - certainlyakey

Answer 2

当我最初认为我需要这个时，我最终做的是将更改为

。但是，我没有将

保留为display:block（默认值），而是将样式指定为display:inline-block，这允许块中可以使用内部

，但仍允许我在同一行上放置多个

。

<div style="display:inline-block">
  <div>context on top</div>
  <div>context on bottom</div>
</div>
<div style="display:inline-block">
  <div>context on top</div>
  <div>context on bottom</div>
</div>

这应该让两个块彼此相邻（不使用浮动），每个块内部应该有两个块，一个在另一个顶部。您也可以在样式中指定宽度以使其看起来符合要求。

- mpop

---

是的。好答案 - 阐明了如何在同一行中获取多个块而不使用丑陋过时的浮动。 - clearlight

简洁明了，运行流畅，非常感谢。 - Ari Black

Answer 3

根据给定的模糊描述：

.A {
  position: relative;
}
.B {
  position: absolute;
  top: 0;
  left: 0;
}

<span class="A">text<div class="B">div</div></span>

- Damb