我有这个简单的 html，带有样式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#buttons { width:300px; max-width:300px; border-width:1px; white-space:normal; border-style:solid; }
#buttons span { cursor:default; padding:10px; white-space: nowrap; }
</style>
</head>
<body>
<nav id="buttons">
<span>Some Button</span><span>Button</span><span>A longer button</span><span>Another button</span><span>Click me first</span><span>Button</span></nav>
</body>
</html>
主 block 元素 (#buttons) 的宽度应该是固定的，但包含的 span 元素是动态生成的，并且具有可变长度。我希望这些“跨度”元素能够包裹并留在 block 内，无论它们有多少。所以基本上，如果需要，主 block 元素应该垂直扩展。
现在，它们水平扩展，溢出主容器。
出于某些奇怪的原因，如果我在内联“span”元素之间放置空格，它就可以工作。但我不能在生产环境中这样做(它们通过 javascript 库附加到 DOM)。
最佳答案
我在您的 CSS 中添加了粗体部分:
#buttons { width:300px; max-width:300px; border-width:1px; white-space:normal; border-style:solid; **overflow: auto;** }
#buttons span { **float: left;** cursor:default; padding:10px; white-space: nowrap; }
可以在 http://jsfiddle.net/S9rz8/ 查看实际操作
认为这就是您想要的？
关于css - 元素不包裹在固定宽度的 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7610984/