带日期的无表格表格[关闭]

Question

我不是 Html 和 css 方面的专家，但我知道如何制作漂亮的响应式页面、无表格、无表格表单等...

但我陷入了一种我不知道如何处理的形式。使表格无表格对我来说很容易，只要我们每行有 1 个字段，现在我需要在同一行中有 2 个字段和标签。

我想使用纯 css 来处理，我需要将它们对齐。现实生活中的例子是任何旅游公司的一种形式，他们要求提供 dateFrom 和 DateTo。

另外，我正在使用框架 Skeleton (http://www.getskeleton.com/)

1stlabel
|1stfield|

2ndlabel1   3rdlabel1
|2ndfield|  3rd|field|

4thlabel
|4thfield|

我当前的标记：

<form>

    <div class="field">
        <label>FieldA</label>
        <input type="text">
    </div>


    <div class="doubleFields">

        <div class="first">
            <label>DateFrom</label>
            <input type="text">
        </div>

        <div class="second">
            <label>DateTo</label>
            <input type="text">
        </div>

    </div>

</form>​

Answer 1

给它们一个特定的类名，并在它们上设置display: inline-block。

---

在您的具体情况下：

.doubleFields div {
    display: inline-block;
}

应该做得很好。