将span标签包含在div中

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>

现在的问题是span标签溢出了它们的容器div标签。请问有没有人能够友善地告诉我如何使这些span标签被包裹在它们的容器div中（这里是id为tagcloud的div）？两个外部的div都指定了宽度为300px。

（附加信息- 我使用了YUI reset-fonts-grids进行了CSS重置。我正在逐渐熟悉CSS。 - 可以查看网站frekshrek.appspot.com... 标签云只是没有被包裹在它的容器div中）

- rubicondude

---

发布您的CSS也会非常有帮助。 - Valentin Flachsel

Answer 1

另一个选择是将标签设置为内联块级元素：

.mytags {
   display:inline-block;
}

- Ryan Mohr

---

这个解决方案是最好的选择！被接受的那个使用了 float: left，但其实完全没有必要，而这个更通用，在任何情况下都可以使用（例如，如果你想将标签居中对齐...）。 - RealA10N

同意这个答案，看起来是正确的方法：没有浮动，也没有在span之间添加多余的空格（在我特定的情况下不是一个选项，因为需要支持特定的Chrome扩展）。谢谢！jz - J.Z.

Answer 2

尝试在.mytagcloud类上声明float: left;，像这样：

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

请查看您的basiclayout.css文件，第71行。

- Valentin Flachsel

---

@rubic @Freek - 在任何浮动元素上都不应使用 margin: 5px;。在IE6中，会出现双倍浮动边距错误。我建议使用 padding: 5px; 或者 margin: 5px 5px 5px 0;。 - orokusaki

@orokusaki：margin属性已经在@rubicondude的CSS文件中了，但还是谢谢你提醒。另外，同样的问题，我们真的还应该继续支持IE6吗？ - Valentin Flachsel

不确定这是否仍然适用... 对我没有用。 - David Brossard

@DavidBrossard，浮动元素仍然会浮动，这已经很长时间没有改变了，因为它是CSS 2.1属性，并且几乎所有浏览器都支持。在您的情况下，必须有其他原因阻止其正常工作。 - Valentin Flachsel

与CSS一样，可能会有 :-) 感谢更新。我认为我的问题是div的父元素是一个可以无限增长的td。没有理由让DIV停止。 - David Brossard

Answer 3

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

- Simon Dyson

---

您可以随时编辑您的第一个答案，添加更新或完全替换初始答案。这有助于保持答案部分的清洁 ;) - Valentin Flachsel

有没有其他方法，因为我正在通过for循环动态生成span标签，在服务器上用div包装它们并发送它们。无法想出在它们之间添加空格的方法。 - rubicondude

在您的for循环中，您可以尝试在闭合的span标签后立即添加“ ”。这是表示不间断空格的HTML实体。因此，例如，服务器应返回类似以下的内容：<span>...</span> <span>...</span>。 - Simon Dyson

在 CSS 文件中添加一行不是更简单吗？ - Valentin Flachsel

我做不到那个，Simon，因为我在那里使用了某种HTML助手。无论我要做什么，都必须在CSS文件中完成。你在说哪一行，FreekOne？如果有类似的东西能够起作用，那将非常有帮助！ - rubicondude

Answer 4

看起来您是在 div 容器中浮动了 spans。如果是这种情况，并且您想要“tagcloud” 包含（包裹）浮动的 spans，则需要通过将以下内容添加到 tagcloud CSS 中来清除浮动：

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

这种技术的解释可以在这里找到：http://www.quirksmode.org/css/clearing.html。

- Simon Dyson

---

不，我根本没有将span浮动在里面。那里应用的唯一CSS是设置外部两个div的宽度和span标签的字体。就是这样。虽然上述解决方案有助于将span适配到div内，但会在底部引入滚动条。当宽度即将超出时，它不会将span从一行换到下一行。 - rubicondude