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>

我没有测试过这段代码，可能有一些错误，但它应该给出了大概的思路。