Почему форма искажает дизайн?

@vlad-55 · Регистрация: 21.02.2009

Студворк — интернет-сервис помощи студентам

Из CMS приходит код формы ввода, фрагмент которого приведен ниже. Но получается так, что размеры колонок в таблице не соответствуют тому, что задано стилями.

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

В скриншотах видны оба варианта - и с формой, и без нее. Из сравнения скиншотов видно, что само наличие формы почему-то уменьшает размер левой ячейки. Кроме того, окно ввода не полностью заполняет правую ячейку.

Как сделать, чтобы ширина левой ячейки соответствовала заданному в стилях, и чтобы окно ввода занимало всю правую ячейку?

(При этом ширину в пикселях задавать нельзя, поскольку на странице резиновый дизайн.
Кроме того, предпочтительно манипулировать только стилями, поскольку не все изменения HTML кода удастся реализовать).

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.comment {
    background: #F0EFEB;
    color: #333;
    margin: 1% 5% 2% 0;
    position: relative;
    padding: 2%;
    border-radius:15px;
    display:table;
    width:90%;
    border: red 1px solid;
}
 
.row {display:table-row;}
.caption {display:table-cell; background-color:#CF3; width:30%;}
.field {display:table-cell; background-color:#C6C; width:70%; }

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<!-- Это полный код из CMS -->
<p>С формой ввода</p>
<div class="comment">
<form action="/news/twelfth-news/" name="comment_form_00" method="post" >
    <div class="row">    
    <div class="caption">Имя</div>
    <div class="field"><input type="text" style="float: left; width:100%" name="author" value="" /></div>   
    </div>
</form>    
</div>
 
<!-- Если из кода убрать форму -->
<p>Коды формы ввода удалены</p>
<div class="comment">
    <div class="row">    
    <div class="caption">Имя</div>
    <div class="field"> Dva </div>   
    </div>   
</div>

@monochromer · 11.02.2014, 20:04

Попробуйте

CSS
1
2
3
4
form{
  display:table;
  width: 100%;
}

@vlad-55 · 11.02.2014, 20:17 **[ТС]**

Супер! Я в восторге!
С утра бился, а решение такое простое!
Спасибо!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

@vlad-55 156 / 20 / 5 Регистрация: 21.02.2009 Сообщений: 2,787
	11.02.2014, 20:17 [ТС]
	Супер! Я в восторге! С утра бился, а решение такое простое! Спасибо! 0