Предотвратить разрыв строки после
Есть ли способ предотвратить разрыв строки после div с помощью css?
Например, у меня есть
<div class="label">My Label:</div>
<div class="text">My text</div>
и хочу, чтобы он отображался примерно так:
My Label: My text
8 ответов
display:inline;
OR
float:left;
OR
display:inline-block; -- Может работать не во всех браузерах.
Какова цель использования здесь div? Я бы предложил span, поскольку это элемент встроенного уровня, тогда как div является элементом блочного уровня.
Обратите внимание, что каждый вариант выше будет работать по-разному.
display:inline; превратит div в эквивалент span. На него не повлияют margin-top, margin-bottom, padding-top, padding-bottom, height и т. д.
float:left; сохраняет div как элемент блочного уровня. Он по-прежнему будет занимать место, как если бы это был блок, однако ширина будет соответствовать содержимому (при условии width:auto;). Для некоторых эффектов может потребоваться clear:left;.
display:inline-block; — вариант «лучшее из обоих миров». div рассматривается как блочный элемент. Он отвечает всем правилам margin, padding и height, как и ожидается для блочного элемента. Однако он рассматривается как встроенный элемент для размещения внутри других элементов.
Прочитайте это для получения дополнительной информации.
Раздел DIV по умолчанию является отображаемым элементом BLOCK, то есть он находится на отдельной строке. Если вы добавите свойство CSS display:inline, оно будет вести себя так, как вы хотите. Но, возможно, вам стоит вместо этого рассмотреть SPAN?
<span class="label">My Label:</span>
<span class="text">My text</span>
div используются для придания структуры веб-сайту или содержать много текста или элементов, но вы, кажется, используете их как метку, вы должны использовать span, он автоматически поместит оба текста рядом друг с другом, и вам не нужно будет писать для него код css.
И даже если другие люди говорят вам перемещать элементы, лучше просто изменить теги.
Элементы div являются блочными элементами, поэтому по умолчанию они занимают всю доступную ширину.
Один из способов — превратить их во встроенные элементы:
.label, .text { display: inline; }
Это будет иметь тот же эффект, что и использование элементов span вместо элементов div.
Другой способ заключается в плавании элементов:
.label, .text { float: left; }
Это изменит то, как определяется ширина элементов, так что они будут такими же широкими, как и их содержимое. Это также заставит элементы плавать рядом друг с другом, подобно тому, как изображения плавают рядом друг с другом.
Вы также можете изменить элементы. Элемент div предназначен для разделения документа, я обычно использую элемент label и элемент span для такой конструкции:
<label>My Label:</label>
<span>My text</span>
попробуйте поплавать свой div в css
.label {
float:left;
width:200px;
}
.text {
float:left;
}
Попробуйте применить атрибут CSS clear:none к метке.
.label {
clear:none;
}
.label, .text {display: inline}
Хотя, если вы используете это, вы также можете изменить div на span.