Question

我有这个简单的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>

主要块元素（#buttons）应固定宽度，但包含的span元素是动态生成的，并且具有可变长度。我希望这些'span'元素能够包裹并保持在块中，无论它们有多少。所以基本上主要的块元素应该在需要时垂直扩展。

现在，它们水平扩展，溢出主容器。

由于一些奇怪的原因，如果我在内联'span'元素之间放置空格，它就可以了。但我不能在生产中这样做（它们通过javascript库附加到DOM）。

Answer 1

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

查看

认为这就是你想要的？

Answer 2

这个答案是你想要每行多个项目。

如果将float: left;添加到跨度样式，则会换行。将position: absolute;添加到#buttons以使容器具有高度。

http://jsfiddle.net/TNmrZ/1/

Answer 3

我认为您的所有元素都被视为inline。
制作它们display:block并且它应该可以正常工作。

没有包装在固定宽度div内的元素

3 个答案: