Блог

Главная - Вопросы по программированию - Элементы, не переносящиеся внутри div с фиксированной шириной

Элементы, не переносящиеся внутри div с фиксированной шириной

#css #html #word-wrap

#css #HTML #перенос слов

Вопрос:

У меня есть этот простой 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).

Ответ №1:

Я добавил биты, выделенные жирным шрифтом, в ваш css:

 #buttons { width:300px; max-width:300px; border-width:1px; white-space:normal;  border-style:solid; **overflow: auto;** }
#buttons span { **float: left;** cursor:defau< padding:10px; white-space: nowrap; }

Можно увидеть в действии на http://jsfiddle.net/S9rz8 /

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

Ответ №2:

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

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

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

Ответ №3:

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

Комментарии:

1. Это предполагает, что оператору требуется один элемент на строку, что неясно из вопроса.

2. Nav считается блоком в html5. И создание промежутков «блоков» просто поместит их один под другим, но я хочу, чтобы они отображались в строке, только при переполнении nav -> перейти на новую строку.

3. Я вставил какой-то фиктивный текст, извините. 🙂 На самом деле это пользовательские кнопки с пользовательским текстом на них.

4. Смотрите мой ответ для более чем одного элемента в строке. 🙂