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>

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

Answer 2

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

ul {
  list-style: none;
}

li {
  display: inline;
}

控制权是日期，下拉等等。

如果你愿意，也可以放置边框。

Answer 3

易于制作网格

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

Answer 4

我在表中看到的最大问题是，如果它们有边距，它们在IE和其他浏览器中呈现的方式不同，这很痛苦。通常认为更好的做法是使用div。

CSS Div布局或表格布局

4 个答案: