Question

我在前端有这个表，我一直在读DIV是更好的编码方式，你如何在DIV中表示相同的结构？

<table>
        <tr>
            <td colspan="6" class="title"><strong>Choose Dates</strong></td>
            <td colspan="2" class="title"><strong>Search by Name</strong></td>
            <td class="title"><strong>Status</strong></td>
        </tr>
        <tr>

            <td><input type="text" id="dateFrom" /></td>
            <td><strong>To</strong></td>
            <td></td>
            <td><input type="text" id="dateTo" /></td>

            <td><input type="checkbox"id="pendResCheckID" />Pending</td>
            <td><input type="checkbox"id="ConfResCheckID" />Confirmed</td>
            <td><input type="checkbox"id="CancResCheckID" />Canceled</td>

        </tr>
</table>

Answer 1

您不需要任何<div>，只需更好地利用现有的表单元素;

<form>
    <fieldset>
        <legend>Choose Dates</legend>
        <input> To <input>
    </fieldset>
    <fieldset>
        <legend>Status</legend>
        <label><input type="checkbox"> Pending</label>
        <label><input type="checkbox"> Confirmed</label>
        <label><input type="checkbox"> Canceled</label>
    </fieldset>
</form>

现在，真正的工作在于编写css，使其看起来像你想要的样式。我首先从<fieldset>移除边框并将它们彼此相邻浮动。

fieldset {
    float: left;
    border: none;
}

查看http://jsfiddle.net/ZqQRh/1/

（我遗漏了一些基本细节和属性，因为问题主要是关于结构）

我如何用最佳实践div来表示这一点？

1 个答案: