CSS Div布局或表格布局

Question

如何使用CSS为简单表单获取此布局

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


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

Answer 1

你打算在第一个"行"下面有一个表格布局吗？如果是,则使用表格.这是表格数据,而这是表格的计划.人们说你不应该使用表而是css而不是意味着你不应该使用表格进行布局,但你可以将它们用于表格数据.

如果您只计划拥有该行,则可以尝试将元素浮动到左侧.有点像这样:

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>

我没有测试过这段代码,可能会有一些错误,但它应该给出一般的想法.