Html 如何在 <span> 内显示 <div> 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5432397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display a <div> element inside a <span>?
提问by Harish Kurup
My container element is a <span>and I want to display a <div>element inside it. How can I add a <div>inside a <span>without making the <div>display: inline;?
我的容器元素是 a<span>并且我想在其中显示一个<div>元素。如何<div>在<span>不制作 的情况下添加内部 a <div>display: inline;？
<span>
<div>Content goes here</div>
</span>
回答by Han Dijk
Change the span to display block? But it makes no sense at all, if you need a block inside, then replace the span with a div. Your document won't validate this way either and behavior in different browsers is kinda unpredictable...
更改跨度以显示块？但这完全没有意义，如果你需要在里面有一个块，那么用一个 div 替换跨度。您的文档也不会以这种方式验证，并且不同浏览器中的行为有点不可预测......
回答by mpop
What I ended up doing when I first thoughtI needed this was changed the span to a div. But instead of leaving the div as a display:block (default) I specified the style to be display:inline-block, this allowed the block so the inner div could be used, but still allowed me to put more then one of the divs on the same line.
当我第一次认为我需要它时，我最终做的是将跨度更改为 div。但是我没有将 div 保留为 display:block（默认），而是将样式指定为 display:inline-block，这允许使用块，因此可以使用内部 div，但仍然允许我放置多个 div在同一条线上。
<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>
This should put 2 blocks next to each other (with out the use of float) and inside of each block there should be 2 blocks one on top of each other. Also you can specify the width on the style to get it to look the way you want.
这应该将 2 个块放在一起（不使用浮动），并且每个块的内部应该有 2 个块一个在彼此的顶部。您也可以指定样式的宽度以使其看起来像您想要的方式。
回答by Damb
According to given vague description:
根据给出的模糊描述：
.A {
position: relative;
}
.B {
position: absolute;
top: 0;
left: 0;
}<span class="A">text<div class="B">div</div></span>