Элементы не обертывают внутри div фиксированной ширины - PullRequest
Новая
       0

Элементы не обертывают внутри div фиксированной ширины

1 голос
/ 30 сентября 2011

У меня есть этот простой 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 'элементы, это работает.Но я не могу сделать это на производстве (они прикреплены к DOM библиотекой javascript).

Ответы [ 3 ]

3 голосов
/ 30 сентября 2011

Я добавил биты, выделенные жирным шрифтом, к вашему 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/

Думаете, это то, что вы хотите?

2 голосов
/ 30 сентября 2011

Этот ответ, если вы хотите более одного элемента в строке.

Если вы добавите float: left; к стилю пролетов, они переносятся. Добавьте position: absolute; к кнопкам #, чтобы контейнер имел высоту.

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

1 голос
/ 30 сентября 2011

Я думаю, что оба ваших элемента считаются inline.Сделайте их display:block, и все должно работать нормально.

...