Вопрос о макете CSS формы

Question

Я пытаюсь узнать больше CSS. Я унаследовал хороший макет, который я использовал в течение некоторого времени, и я хочу сохранить CSS вместо того, чтобы смешивать таблицы там. В настоящее время я разрабатываю отдельную форму, чтобы обрабатывать бок о бок текстовые поля. Я использовал теги span, чтобы держать эти текстовые поля рядом, но теперь мне интересно, какой будет наилучшая практика для этого типа дизайна. Должен ли я использовать контейнер div и span, как я делал, или я должен использовать прямые div и плавать их, как в моем примере?

<div style="overflow:hidden; width:100%; border:1px solid #000;">
  <div>
    <div style="float:left"><input type="text" /></div>
    <div style="float:right"><input type="text" /></div>
  </div>

  <div style="clear:left">
    <div><input type="text" /></div>
  </div>
</div>

Answer 1

Я не совсем уверен, что вы пытаетесь достичь с точки зрения макета, но вы можете получить тот же результат, используя намного меньше разметки:

  <div style="overflow:hidden; width:100%; border:1px solid #000;">
    <div>
      <input type="text" style="float:left" /><input type="text" style="float:right" />
    </div>
    <div style="clear:left">
      <input type="text" />
    </div>
  </div>

Убедитесь, что вы переместили эти встроенные стили в определения классов или идентификаторов. Избегайте использования определений CSS в вашей разметке.

Answer 2

Что касается выбора разметки, это всегда хороший совет, чтобы проверить вашу страницу в текстовом браузере (Lynx, Links, Elinks) и проверить, как она там отображается. Я обычно использую какой-то список (ul, ol или dl) для своих форм.

Не забудьте оформить статью Prettier Accessible Forms * List Apart , которая дает хорошее начало для оформления форм.