元素不包裹内部固定宽度的div

我有这样简单的HTML，以造型：元素不包裹内部固定宽度的div

<!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>

主块元件（#buttons）应固定在宽度，但含有跨接元件是动态生成的，并且具有可变长度。我希望这些'span'元素可以包裹并留在块中，不管它们有多少。所以基本上，如果需要，主块元素应该垂直扩展。

现在，它们横向扩展，溢出主容器。

由于一些奇怪的原因，如果我在内联'span'元素之间放置空格，它就会起作用。但我不能在生产上做到这一点（它们通过JavaScript库附加到DOM）。

来源

2011-09-30 Dan

我加粗体位到你的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/

看到想想这是你想要的吗？

来源

2011-09-30 13:33:00 Bantros