Html 在 div 中包装 span 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3797338/
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
Wrapping span tags inside a div
提问by rubicondude
I have a couple of div tags nested within each other and a few span tags nested like below:-
我有几个相互嵌套的 div 标签和一些嵌套的 span 标签，如下所示：-
<div id="leftcol">
<div id="tagcloud">
<span class="mytags"><a href="">tag1</a></span>
<span class="mytags"><a href="">tag2</a></span>
<!-- and a few more spans of the same type -->
</div>
</div>
Now the issue is that spans overflow their container div tag. Can somebody be kind enough to let me know how to get these spans to be wrapped inside their container div (here the div with the id tagcloud). Both the outer divs have a width of 300px specified.
现在的问题是跨度溢出了它们的容器 div 标签。有人可以让我知道如何将这些跨度包装在他们的容器 div 中（这里是带有 id tagcloud 的 div）。两个外部 div 的宽度都指定为 300px。
(Additional info- I have done a CSS reset using the YUI reset-fonts-grids. I am just getting accustomed with CSS.) -The site can be looked at frekshrek.appspot.com... the tag cloud just does not wrap inside its container div
（附加信息 - 我已经使用 YUI reset-fonts-grids 完成了 CSS 重置。我只是习惯了 CSS。） - 该网站可以在 frekshrek.appspot.com 上查看...标签云只是不包装在其容器 div 内
采纳答案by Valentin Flachsel
Try declaring float: left;on the .mytagcloudclass. Something like:
尝试float: left;在.mytagcloud类上声明。就像是：
.mytagcloud{
float: left;
margin: 5px;
font-family: 'Reenie Beanie', arial, serif;
}
in your basiclayout.cssfile, line 71.
在您的basiclayout.css文件中，第 71 行。
回答by Ryan Mohr
Other option is to just set your tags to be displayed inline-block:
其他选项是将您的标签设置为内联块显示：
.mytags {
display:inline-block;
}
回答by Simon Dyson
You have no spaces between your spans, so the browser sees them all as one single long word. If you add a single space or a line break between each span they will be treated as separate words and wrapped accordingly.
跨度之间没有空格，因此浏览器将它们全部视为一个长单词。如果您在每个跨度之间添加一个空格或换行符，它们将被视为单独的单词并相应地换行。
回答by Simon Dyson
It sounds like you are floating the spans inside the div container. If this is the case, and you want the 'tagcloud' to contain (wrap) the floated spans then you need to clear the floats by adding the following to the tagcloud CSS:
听起来您正在 div 容器内浮动跨度。如果是这种情况，并且您希望“tagcloud”包含（包装）浮动的跨度，那么您需要通过将以下内容添加到 tagcloud CSS 来清除浮动：
div.tagcloud {
overflow: auto;
width: 100%;
}
An explanation of this technique can can be found here: http://www.quirksmode.org/css/clearing.html
可以在此处找到此技术的解释：http: //www.quirksmode.org/css/clearing.html
