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

Ответ 1

display:inline;

ИЛИ

float:left;

ИЛИ

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

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

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

display:inline; превратит div в эквивалент a span. На него не будут влиять margin-top, margin-bottom, padding-top, padding-bottom, height и т.д.

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

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

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

Ответ 2

.label, .text {display: inline}

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

Ответ 3

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

Ответ 4

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

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

.label, .text { display: inline; }

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

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

.label, .text { float: left; }

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

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

<label>My Label:</label>
<span>My text</span>

Ответ 5

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

Ответ 6

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

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

Ответ 7

<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;}

Ответ 8

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

.label {
     clear:none;
}

Ответ 9

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

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

Ответ 10

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

.label {
float:left;
width:200px;
}
.text {
float:left;
}

Ответ 11

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

Ответ 12

используйте этот код для нормального div display: inline;

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