У меня есть простой вопрос. Почему это не автоматически размер его содержимого? Как, например, это:Div автоматически 100% широкий
<html>
<div style="margin:auto; background:red;">Test</div>
</html>
Возвращения в width:100%, хотя я хотел бы слово «тест», чтобы быть просто по центру. Есть идеи?
<div style="text-align: center">Test</div>
Этот раздел имеет ширину 100%, так как div - это элементы блока, что означает, что они охватывают 100% ширины. Вам нужно будет настроить отображение на встроенный или встроенный блок, чтобы он «растягивался», чтобы соответствовать содержимому.
Я знаю, но это не объясняет, почему div автоматически является 100% -ной шириной. – Philip
. Разница на 100%, потому что div - это элементы блока, что означает, что они охватывают 100% ширины. Вам нужно будет настроить отображение на встроенный или встроенный блок, чтобы он «растягивался», чтобы соответствовать содержимому. – Quintile
@Quintile, добавьте информацию на свой вопрос, чтобы сделать его более полезным. – isherwood
Это очень просто. По умолчанию, div имеет стиль display: block;. Таким образом, поведение по умолчанию для блока должно иметь 100% от его родительской ширины.
Ваш вопрос связан с основами HTML. Есть block elements и inline elements. Элементы уровня блока, по самой своей природе, всегда будут занимать всю ширину их содержащего элемента. Единственный способ изменить это через CSS.
Если вы хотите обернуть слово и только то, что работаете, в цвете границы или фона, вам нужно использовать встроенный элемент. Например:
div,
span {
border: 1px solid blue;
}<div>Test</div>
<span>Test</span>Вопрос об использовании margin: 0 auto и почему он не центр, потому что вам нужно указать ширину. Чтобы центрировать текст с полной шириной DIV, вам необходимо применить text-align: center;. Таким образом, вам не нужно беспокоиться о переменной длине текста.
div {
text-align: center;
}<div>
Test
</div>Если вы хотите стилизовать ни одного слова и центрирования его в DIV просмотреть фрагмент ниже:
div {
text-align: center;
}
span {
border: 1px solid blue;
}<div>
<span>Test</span>
</div>Другим вариантом было бы , если вы хотите, чтобы центрированный текст занимал только часть содержащего e lement, но по-прежнему быть в центре вы могли бы сделать что-то вроде этого:
.wrap {
width: 50%;
margin: 5px auto;
border: 1px solid blue;
text-align: center;
}<div>
<div class="wrap">
Test
</div>
<div class="wrap">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</div>хорошо, если я даю div 'display: inline;' как я могу его сосредоточить? 'margin: auto;' не работает.? – Philip
Чтобы использовать 'auto' для левого и правого полей, вам нужно указать ширину. – hungerstar
, и теперь есть комментарий для браузера, чтобы увидеть, насколько широким является элемент без указания ширины? – Philip
Поскольку один блочный элемент, а другой является встраиваемой. – Nit