CSS Div макет или макет таблицы

Question

Как я могу получить этот макет для простой формы с помощью CSS

------------------------------------------------------------------------------------------
|Date From | dropdown box | Date To | dropdown box| button|
------------------------------------------------------------------------------------------
grid or table


------------------------------------------------------------------------------------------

Answer 1

Планируете ли вы иметь макет таблицы ниже вашей первой "строки"? Если это так, то используйте таблицы. Это табличные данные, и именно для этого запланированы таблицы. Люди, которые говорят, что вы не должны использовать таблицы, а вместо этого имеют ввиду, что вы не должны использовать таблицы для макета , но вы можете использовать их для табличных данных.

Если вы планируете иметь только одну строку, вы можете попробовать переместить элементы влево. Немного так:

CSS:

.selections div{float:left;}

HTML:

<div class="selections">
    <div>
        <label for="dateFrom">Date from:</label>
        <select id="dateFrom">...</select>
    </div>
    <div>
        <label for="dateTo">Date to:</label>
        <select id="dateTo">...</select>
    </div>
    <div>
        <input type="button" value="Button"/>
    </div>
</div>

Я не тестировал этот код, могут быть некоторые ошибки, но он должен дать общее представление.

Answer 2

Для легкой решетки

http://www.pagecolumn.com/grid_layout_generator_wrapper_float.htm

Answer 3

<ul>
<li>CONTROL</li>
<li>CONTROL</li>
<li>CONTROL</li>
<li>CONTROL</li>
</ul>

ul {
  list-style: none;
}

li {
  display: inline;
}

Где контроль - дата, выпадающий список и т. Д.

Вы можете также поставить границы, если хотите.

Answer 4

Самая большая проблема, с которой я столкнулся при работе с таблицами, заключается в том, что если они имеют поля, они отображаются по-разному в IE и других браузерах, и это неприятно. Как правило, лучше использовать div вместо этого.