Запобігти розриву рядка після </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;перетворить diva на еквівалент 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правила , як очікується , для блочного елемента. Однак він розглядається як вбудований елемент з метою розміщення всередині інших елементів.

Прочитайте це для отримання додаткової інформації.

.label, .text {display: inline}

Хоча, якщо ви використовуєте це, ви можете також змінити div на span.

DIV за замовчуванням є елементом відображення BLOCK, тобто він знаходиться на власному рядку. Якщо ви додасте відображення властивості CSS: 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; }

Це змінить спосіб вирішення ширини елементів, так що ширина wwy буде настільки широкою, як їх вміст. Це також змусить елементи плавати один біля одного, подібно до того, як зображення течуть один біля одного.

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

використовуйте цей код для звичайного div display: inline;

використовуйте цей код, якщо ви використовуєте його в таблиці display: inline-table; краще, ніж таблиця

спробуйте це (in CSS) для запобігання розриву рядків у divтекстах:

white-space: nowrap;