Intereting Posts
Измените html формы контактной формы ПОСЛЕ проверки и отправленной почты Загружать альтернативный контент страницы в div onload Ошибка проверки на Nu HTML Checker: «Плохое значение радио для типа атрибута при вводе элемента». Загрузка фотографий без загрузки файлов размером более 2 МБ Поиск в HTML-странице с использованием шаблонов Regex с помощью python Как подтолкнуть нижний колонтитул к нижней части страницы, когда контент короткий или отсутствует? oninput для jquery на экранной клавиатуре Фоновое изображение Base64 в нескольких строках? Как загрузить изображения в базу данных MySQL с помощью PHP-кода Как разбить массив на многострочные массивы с уникальным именем Удалить стрелки из элемента формы в Bootstrap 3 Как установить действие формы через JavaScript? Поведение HTML-комментариев Чистый эллипс CSS для трех или более строк текста Может ли упорядоченный список выдавать результат, который выглядит как 1.1, 1.2, 1.3 (вместо 1, 2, 3, …) с помощью css?

Ввод текста с шириной 100% внутри td расширяется / продолжается за пределами td

Вот живая демонстрация

Я пытаюсь вставить добавленный текст в td, и я хочу, чтобы он занимал 100% ширины, но он выходит за пределы td. Я не понимаю, почему это происходит, никто не знает?

CSS

table{ border: solid 1px gray; width: 90%; } input{ width: 100%; padding:10px; } 

HTML

 
Hello

объяснение

Вот ссылка на модель W3C Box, которая подробно объясняет, что происходит с вашим элементом.

Модель коробки W3C – – – – – две коробчатые модели

Все входные элементы имеют границы по умолчанию и могут также иметь отступы и поля, но самое главное, это следует за спецификациями модели коробки W3C с помощью контейнера content-box .

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


Решение

Добавьте дополнение к td, чтобы вручную отрегулировать ширину ввода до тех пор, пока он не появится там, где вы хотите. Помните, что добавление отступов к вводу означает, что вы должны добавить ту же сумму в td, чтобы противодействовать расширению.

Вот живой пример

 input { width: 100%; padding: 10px; margin: 0px; } table .last, td:last-child { padding: 2px 24px 2px 0px; } 

Альтернативное решение

Вы также можете использовать версию CSS3, используя размер windows ( совместимость браузера ).
Это свойство можно использовать для переключения между двумя коробками и заставить его вести себя так, как вы ожидали.

Вот живой пример

 input { width: 100%; padding: 10px; margin: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 

Вот несколько возможных дубликатов одного и того же вопроса

  • могу ли я остановить текстовые поля шириной 100% от расширения их контейнеров
  • Проблема с типом ввода = «текст» и ширина текстовой области
  • 100% Ширина div и элементов формы + дополнение?

Просто. 100% ширина + обивка, вот почему. Вы должны установить дополнение для обертки, а не ввод

вы можете использовать свойство box-sizing для этого, потому что padding добавляет width в поле ввода.

CSS:

 input { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; } 

но он не работает IE7

Самый простой способ – установить прописку в процентах от ширины, вычесть из 100%.

Так:

 input { width:96%; padding:0 2%; }