Question

我有几个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>

现在的问题是spans溢出了他们的容器div标签。有人可以让我知道如何让这些跨度包装在他们的容器div中（这里是id为tagcloud的div）。两个外部div都指定了300px的宽度。

（附加信息 - 我使用YUI reset-fonts-grid完成了CSS重置。我刚刚习惯了CSS。） - 该网站可以查看frekshrek.appspot.com ...标签云只是没有包装在其容器div中

Answer 1

其他选项是将标记设置为内联块显示：

.mytags {
   display:inline-block;
}

Answer 2

尝试在float: left;课程上声明.mytagcloud。类似的东西：

.mytagcloud{
    float: left;
    margin: 5px;
    font-family: 'Reenie Beanie', arial, serif;
}

在您的basiclayout.css文件第71行。

Answer 3

您的跨度之间没有空格，因此浏览器将它们全部视为一个长单词。如果在每个跨度之间添加单个空格或换行符，它们将被视为单独的单词并相应地换行。

Answer 4

听起来你是在div容器内浮动跨度。如果是这种情况，并且您希望'tagcloud'包含（包装）浮动跨度，那么您需要通过将以下内容添加到tagcloud CSS来清除浮动：

div.tagcloud {
    overflow: auto;
    width: 100%;
}

可以在此处找到对此技术的解释：http://www.quirksmode.org/css/clearing.html

在div中包装span标签

4 个答案: