У меня есть следующий CSS и HTML-фрагмент.
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"/>
</div>
Проблема в том, что текстовая область оказывается на 8px шире (2px для границы + 6px для отступа), чем родительская. Есть ли способ продолжать использовать границы и отступы, но ограничить общий размер textarea
шириной родительского элемента?
html
css
stylesheet
Эрик Шуновер
источник
источник
Ответы:
Почему бы не забыть хаки и просто сделать это с помощью CSS?
Один я часто использую:
Смотрите поддержку браузера здесь .
источник
Ответ на многие проблемы форматирования CSS, кажется, «добавить еще один <div>!»
Итак, в этом духе, вы пытались добавить div-обертку, к которой применяются границы и отступы, а затем поместить текстовую область шириной 100% внутри этого? Что-то вроде (не проверено):
источник
давайте рассмотрим окончательный результат, представленный пользователю того, чего мы хотим достичь: текстовая область с отступами и с рамкой, и с отступом, характеристики которых заключаются в том, что при нажатии они передают фокус нашей текстовой области, и преимущество автоматической ширины 100% типично для блочных элементов.
На мой взгляд, наилучшим подходом является использование решений низкого уровня, насколько это возможно, для достижения максимальной поддержки браузеров. В этом случае единственный HTML может работать нормально, избегая использования Javascript (который так или иначе мы все любим).
Тег LABEL приходит в нашу помощь, потому что он имеет такое поведение и может содержать элементы ввода, к которым он должен обращаться. Его стиль по умолчанию - стиль встроенных элементов, поэтому, придав метке блочный стиль отображения, мы можем использовать автоматическую 100% ширину, включая отступы и границы, в то время как внутренняя текстовая область не имеет рамок, нет отступов и ширины 100%. ,
Взглянув на особенности W3C, мы можем заметить и другие преимущества:
См. Особенности W3C для более подробной информации.
Простой пример:
Заполнение и граница элементов .textareaContainer - это те, которые мы хотим дать текстовой области. Попробуйте отредактировать их так, чтобы они соответствовали вашему стилю. Я дал большие и видимые отступы и границы для элемента .textareaContainer, чтобы вы могли видеть их поведение при нажатии.
источник
Если вы не слишком беспокоитесь о ширине заполнения, это решение на самом деле также сохранит заполнение в процентах.
Не идеально, но вы получите некоторые отступы, а ширина увеличивается до 100%, так что все хорошо
источник
Я наткнулся на другое решение здесь , что это так просто: добавить отступ-право контейнера TEXTAREA в. Это сохраняет поля, границы и отступы для текстовой области, что позволяет избежать проблемы, на которую Бек указал в отношении выделения фокуса, которое хром и сафари помещают вокруг текстовой области.
Право отступа контейнера должно быть суммой эффективного поля, границы и отступа по обеим сторонам текстовой области, а также любого отступа, который вы можете использовать для контейнера. Итак, для случая в оригинальном вопросе:
источник
Этот код работает для меня с IE8 и Firefox
источник
Вы можете использовать свойство box-sizing, оно поддерживается всеми основными стандартными браузерами и IE8 +. Вам все еще потребуется обходной путь для IE7, хотя. Узнайте больше здесь .
источник
Нет, вы не можете сделать это с помощью CSS. По этой причине Microsoft изначально представила другую, и, возможно, более практичную блочную модель . Модель коробки, которая в конечном счете победила, делает непрактичным смешивать проценты и единицы.
Я не думаю, что с вами нормально выражать отступы и ширину границы в процентах от родителя.
источник
Я искал решение для inline-стилей вместо CSS, и это лучшее, что я могу сделать для адаптивного текстового пространства:
источник
Если вы добавите и сместите его так:
правая сторона текстовой области идеально совпадает с правой стороной контейнера, а текст внутри текстовой области идеально совпадает с основным текстом в контейнере ... и левая сторона текстовой области немного выпирает. это иногда красивее.
источник
Использовать свойство размера окна :
Это поможет
источник
Для тех, кто использует Bootstrap, textarea.form-control также может привести к проблемам с размерами textarea. Похоже, что Chrome и Firefox используют разные высоты с помощью следующего загрузочного CSS:
источник
Я часто решаю эту проблему с
calc()
. Вы просто даете текстовой области ширину 100% и определенное количество отступов, но вы должны вычесть общее левое и правое заполнение из 100% ширины, которую вы дали текстовой области:Или, если вы хотите дать текстовой области границу:
источник
Как насчет отрицательных полей?
источник
источник