Стиль страницы: альтернатива использованию поплавков

Question

Всякий раз, когда я хочу разместить элементы рядом друг с другом, я склонен использовать поплавки на них как использовать два div с float: слева от них. Мне интересно, является ли это лучшей стратегией или есть лучшая альтернатива.

Это пример кода

 <div>
  <div style="float:left">
    <p>Alphabet</p>
    <select  style="width: 200px;">
     <option>A</option>
     <option>B</option>
    </select>
    </div>
      <div style="float:left;  margin-left:20px;">
         <p>Number</p><input type="text" value="123" />
      </div>
 </div>

Что еще я могу улучшить в приведенном выше коде. Это <p> действительно необходимо, или я должен использовать какой-то другой тег.

Живой пример

Answer 1

Альтернативой может быть использование display:inline-block; и использование меток, как в в этом примере.

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

Во всяком случае, я не вижу смысла в том, чтобы не использовать поплавки. Если вы знаете, как правильно их использовать, они великолепны и совместимы со всеми браузерами.

Answer 2

Используйте, например, style="display:inline-block"

И о вашем втором вопросе:

<div style="display:inline-block">
   <label for="alphabet" style="display:block;">Alphabet</label>
   <select id="alphabet" style=" width: 200px;">
     <option>A</option>
     <option>B</option>
   </select>
</div>

использование label более семантическое, а применение display:block к нему делает еговся ширина.

Также старайтесь не использовать встроенный CSS.

Answer 3

Используйте float: left;.Нет причин не использовать его в этой ситуации.

Он очень хорошо поддерживается, и "встроенный блок" доставит вам проблемы, если вы не взломаете его для старых браузеров ... когда вы могли бы использовать float: left;все вместе.