Предотвратить разрыв строки после </div>

95

Есть ли способ предотвратить разрыв строки после div с помощью css?

Например у меня есть

<div class="label">My Label:</div>
<div class="text">My text</div>

и хотите, чтобы он отображался так:

Мой ярлык: Мой текст

Фабиано
источник

Ответы:

152

display:inline;

ИЛИ

float:left;

ИЛИ

display:inline-block; - Может работать не во всех браузерах.

Какова цель использования divздесь? Я бы предложил a span, поскольку это элемент встроенного уровня, тогда как a div- элемент уровня блока.


Обратите внимание, что каждый вариант выше будет работать по-разному.

display:inline;превратит divв эквивалент a span. Это не затронет margin-top, margin-bottom, padding-top, padding-bottom, heightи т.д.

float:left;сохраняет divкак элемент уровня блока. Он по-прежнему будет занимать место, как если бы это был блок, однако ширина будет соответствовать содержимому (при условии width:auto;). clear:left;Для определенных эффектов может потребоваться a .

display:inline-block;вариант "лучшее из обоих миров". divРассматривается как элемент блока. Он реагирует на все margin, paddingи heightправила , как ожидается , для блочного элемента. Однако он рассматривается как встроенный элемент с целью размещения в других элементах.

Прочтите это для получения дополнительной информации.

Джефф Руперт
источник
3
Я использовал теги div, потому что они были автоматически сгенерированы шаблоном
Фабиано
Div с display: inline в основном аналогичен диапазону. Это семантически бессмысленный контейнер. Единственное отличие - это их режим отображения по умолчанию (блочный против встроенного)
Joeri Hendrickx
Div с display: inline не работает в Safari, он все равно ломается. Я использую диапазон.
Густаво
inline-block только помог. Благодарность!
Дрей,
12
.label, .text {display: inline}

Хотя, если вы используете это, вы также можете изменить div на span.

mikemerce
источник
10

DIV по умолчанию является элементом отображения BLOCK, что означает, что он находится в отдельной строке. Если вы добавите свойство CSS display: inline, оно будет вести себя так, как вы хотите. Но, возможно, вам стоит подумать о SPAN?

Дэвид М
источник
7
<span class="label">My Label:</span>
<span class="text">My text</span>
Майк
источник
5

Эти divэлементы являются блочными элементами, поэтому по умолчанию они принимают УППЫ полной доступной ширину.

Один из способов - превратить их во встроенные элементы:

.label, .text { display: inline; }

Это будет иметь тот же эффект, что и использование spanэлементов вместо divэлементов.

Другой способ - разместить элементы:

.label, .text { float: left; }

Это изменит способ определения ширины элементов, так что ширина thwy будет равна ширине их содержимого. Это также заставит элементы плавать рядом друг с другом, подобно тому, как изображения перемещаются рядом друг с другом.

Вы также можете подумать об изменении элементов. divЭлемент предназначен для подразделений документов, я обычно использую labelи в spanэлемент для конструкции , как это:

<label>My Label:</label>
<span>My text</span>
Гуффа
источник
4

div используются для создания структуры веб-сайта или для содержания большого количества текста или элементов, но вы, кажется, используете их в качестве меток, вы должны использовать span, он автоматически поместит оба текста рядом друг с другом, и вам не нужно будет писать css-код для него.

И даже если другие люди говорят вам перемещать элементы, лучше всего просто изменить теги.

Кристоф
источник
3

Не думаю, что видел эту версию:

<div class="label">My Label:<span class="text">My text</span></div>
Maxhirez
источник
2
<div id="hassaan">
     <div class="label">My Label:</div>
     <div class="text">My text</div>
</div>

CSS:

#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
Hassaan
источник
5
Вы можете объяснить свой ответ в интересах ОП
Лука
1

Попробуйте применить clear:noneк метке атрибут css.

.label {
     clear:none;
}
они называют память
источник
1
Это не имеет никакого эффекта, так как по- divпрежнему имеет значение по умолчанию, width:autoкоторое заставляет его занимать всю доступную ширину.
Guffa
0

попробуйте разместить свой div в css

.label {
float:left;
width:200px;
}
.text {
float:left;
}
Тим
источник
1
Не забудьте сделать следующий элемент, clear: left;чтобы вернуть документ в нормальное русло.
Пит
0

Мне много раз удавалось получить div без разрывов строк после них, играя с атрибутом float css и атрибутом css ширины.
Конечно, после разработки решения вы должны протестировать его во всех браузерах, и в каждом браузере вы должны изменить размер окон, чтобы убедиться, что оно работает при любых обстоятельствах.

Йоэль Халб
источник
0

используйте этот код для обычного div display: inline;

используйте этот код, если вы используете его в таблице display: inline-table; лучше, чем в таблице

Пн.
источник
0

попробуйте это (в CSS) для предотвращения разрывов строк в divтекстах:

white-space: nowrap;
Густавз
источник