Вопросы Теги

Как я могу сделать ширину TextArea 100% без переполнения, когда в CSS присутствует отступ?

Notepad ++ дал поле вкладки правильно, но проблема с отступом была наконец найдена в текстовом редакторе Sublime.

Использовать Sublime текстовый редактор и идти по строкам

404
задан captainsac 26 June 2015 в 05:37
поделиться

5 ответов

Если Вы будете не слишком побеспокоены о ширине дополнения, это решение на самом деле сохранит дополнение в процентах также.. 

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

Не прекрасный, но Вы получите некоторое дополнение, и ширина составляет в целом 100% так ее вся польза

15
ответ дан jontyc 26 June 2015 в 05:37
поделиться

Ответ на многий CSS, форматирующий проблемы, кажется, "добавьте другой < отделение>!"

Так, в том духе, Вы попытались добавить отделение обертки, к которому граница/дополнение применяются и затем вставление текстовой области 100% шириной этого? Что-то как (непротестированный): 

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
76
ответ дан captainsac 26 June 2015 в 05:37
поделиться

Нет, Вы не можете сделать этого с CSS. Это - причина, Microsoft первоначально представила другого, и возможно более практичный модель поля. Модель поля, которая в конечном счете победила, делает невозможным смешать проценты и единицы.

я не думаю, что нормально с Вами выражать дополнение и ширину рамки в проценте родителя также.

2
ответ дан buti-oxa 26 June 2015 в 05:37
поделиться

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

На мой взгляд, лучший подход - по возможности использовать низкоуровневые решения для достижения максимальной поддержки браузерами. В этом случае единственный HTML может работать нормально, избегая использования Javascript (который в любом случае мы все любим).

Тег LABEL приходит к нам в помощь, потому что имеет такое поведение и может содержать элементы ввода, к которым он должен обращаться. Его стиль по умолчанию - это один из встроенных элементов, поэтому присвоение метке блока стиль отображения мы можем использовать автоматическую 100% ширину, включая отступы и границы, в то время как внутреннее текстовое поле не имеет границ, нет отступов и имеет 100% ширину.

Взглянув на особенности W3C, мы можем заметить следующие преимущества:

  • атрибут «for» не требуется: когда тег LABEL содержит целевой ввод, он автоматически фокусирует дочерний ввод при нажатии;
  • if внешняя метка для текстовой области уже разработана, конфликтов не возникает, поскольку данный вход может иметь одну или несколько меток.

См. Специфика W3C для получения более подробной информации.

Простой пример: 

 .container {width: 400px; граница: 3px solid # f7c; }.textareaContainer {дисплей: блок; граница: 3px solid # 38c; отступ: 10 пикселей; } текстовое поле {ширина: 100%; маржа: 0; отступ: 0; ширина границы: 0; } 
  
 Я контейнер