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

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

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

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

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

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

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правила , как ожидается , для блочного элемента. Однако он рассматривается как встроенный элемент с целью размещения в других элементах.

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

.label, .text {display: inline}

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

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

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

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

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

.label, .text { display: inline; }

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

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

.label, .text { float: left; }

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

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

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

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

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

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

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

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

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

.label {
     clear:none;
}

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

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

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

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

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

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

white-space: nowrap;