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

我只是需要一个精神检查

基本上，我不知道如何让链接下的框随着内容的增加而变得更宽。它似乎固定在父div的宽度或最长元素（比如select）的宽度上，或者固定在没有空格的真正长单词的宽度上，尽管它是绝对定位的。我一直在用这个技巧对付ul和li，但是在我的情况下用这个技巧是没有意义的，而且由于一些疯狂的原因，它在一个div里面的div是不起作用的

<pre>text goes here</pre>

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

谢谢:\

编辑

---

实际上，从父元素中删除position:relative确实会使长方体变得更宽。但是，相对定位是必要的，因为我需要将子div绝对定位在父div下，并且父div的位置在技术上是动态的，因此无法计算绝对页面坐标。

您尝试过pre标记吗

---

这将导致仅在插入divparent的位置为position:relative；的位置断开该行；。尝试删除该声明。在我的环境中，这会导致div根据需要展开。

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

如果我理解正确

浮动容器，即父容器将适合其内容，默认宽度为：auto。内容将在可能的情况下断线，以防止宽度不断增加

为了解决这个问题，您只需要使用空白：nowrap

对于整个内容：

.line {
    white-space: nowrap;
}

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

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

然后，例如，将每个标签包装/选择为：

---

位置：相对存在的原因是因为div是绝对定位的。。。实际操作是使子div离开页面，并在父div悬停时更改左位置。尽管如此，删除position:relative将使其正常工作，您是正确的：\n我使用的是我认为最新版本的chrome！哈5.0.375.70但也检查FF 3.6.3这里有一些屏幕截图，我在Mac OS X 10.6.3:Firefox 3.6.4-| Chrome-6.0.422.0 dev-| Safari 4.0.5-ha好的，这不是我想要的功能。我一直在寻找一个水平扩展的盒子，而不管内容中是否有空格。被接受的答案起到了关键作用：无论如何，谢谢你的关注！空白：nowrap FTW！谢谢你，伙计。我不知道为什么我以前没想到。。。杜瑞尔

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