Question

我只需要在这里进行健全检查...... DEMO

基本上，我无法弄清楚如何在链接下方添加更多内容的范围。它看起来固定在父div的宽度上（或者说，最长元素的宽度，如select或一个没有空格的长字），尽管它是绝对定位的。我一直用ul和li来使用这个技巧，但在我的情况下使用它是没有意义的，并且出于一些疯狂的原因，它只是不适用于div中的div

我不想设置宽度（当然，这是有效的），因为我并不总是知道这个盒子里会有什么。 GRR

谢谢：\

修改

事实上，从父元素中删除position:relative似乎允许框更宽。但是，相对定位是必要的，因为我需要将子div绝对定位在父div之下，并且父div的位置在技术上是动态的（所以不要找出绝对页面坐标）。

Answer 1

如果我理解正确......

浮动容器（即#parent）将适合其内容，默认值为width: auto。内容将在可能的情况下换行，以防止宽度不断增加。

要解决此问题，您只需要使用white-space: nowrap。

对于整个内容：

.advanced {
    /* ... */
    white-space: nowrap;
}

或者，定义一个新类以允许更灵活的使用：

.line {
    white-space: nowrap;
}

然后，（例如）将每个label / select换行为：

<div class="line">
    <label>Show:</label>
    <select name="showAll">
        <option value="true">My Team</option>
        <option value="false">Mine Only</option>
    </select>
</div>

Answer 2

您是否尝试过预标签

<pre>text goes here</pre>

这将导致仅在您插入<br />

的任何地方打破该行

Answer 3

div#parent有position: relative;。尝试删除该声明。在我的环境中，这会导致div根据需要扩展。

Answer 4

我在Google Chrome 6.0.422.0 dev中，当我添加内容（文本）时，灰色框会根据需要水平和垂直展开。您使用的浏览器是什么？

CSS：为什么这个盒子不会变宽？

4 个答案: