CSS-формы вместо таблиц 2011

Question

Я отказался от использования CSS для стилизации форм, когда столкнулся с трудностями, такими как необходимость в трех текстовых полях рядом друг с другом (например, номер телефона) или раскрывающемся списке рядом с текстовым полем.Я просто не мог придумать надежный способ стилизовать его без хороших старых таблиц.

Я думаю вернуться к CSS для стилизации форм;Я не знаю:

1. Можно ли использовать надписи сверху или слева от поля.
2. Как оформить вещи так, чтобы они хорошо размещались даже спара смежных элементов формы.

Ссылки?Это все еще несбыточная мечта?

Answer 1

Вы имеете в виду, как это?

В основном мы создаем псевдотаблица

.mxrow {
clear: both;
width: 100%;
height: 50px;
}


.mxcell {
float: left;
padding-top: 10px;
padding-bottom: 10px;
height: 26px;
}

.mxcell_firstcell{
width: 25%;
}

И разметка будет

<div class = "mxrow">
  <div class = "mxcell mxcell_firstcell"><input element /></div>
  <div class = "mxcell mxcell_secondcell"><another form element/></div>
</div>

Отдельные имена классов ячеек служат для применения определенных CSS (моя разметка является сеткой)

Answer 2

Существует несколько CSS-шаблонов, разработанных специально для размещения форм.

• vessess.com
• Uni-форма

Надеюсь, это поможет вам найти продуктивное и удивительное направление. Береги себя.

Answer 3

Другие люди дают вам некоторые действительные предложения ... если у вас все еще есть проблемы, вы можете попробовать форму css, например, formee ... http://www.formee.org/

Answer 4

Нет, это очень возможно, и я (и многие другие) делали это годами.

Посмотрите на float: (left|right) и display: (inline|inline-block).