javascript - CSS - 使用可调整的列设置行的样式

Question

我正在尝试在测试应用程序中设计用户注册页面的布局，但在将每个组件放置到位时遇到了麻烦。我必须说，CSS 从来都不是我的强项。我的表单设计非常简单，没有什么花哨的。看:

我可以为客户提供的每组字段设置完美的样式，包括页面轮廓、标题、 session 。但是...我的问题是生日字段的布局。我尝试在表格中设置用户输入字段的样式，或多或少遵循以下方案:

在方案中，我把红色部分作为每个session的内容(session是绿色部分)。请注意，我们有一个包含两列和 6 行的表格，使用样式参数“border-spacing”分隔。

作为最终结果，日、月和年字段 (dd/mm/yyyy) 总是最终停留在不同的行中，或者导致第二列在水平方向上变宽。他们最终得到了我不想要的尺寸。在这种类型的样式中，我正在创建一个没有定义宽度的页面(我正在分配宽度为“%”的字段)，允许用户根据需要拉伸(stretch)它。 我也避免使用 JavaScript 或字段类型“日期”，这仅与某些浏览器兼容。

有人可以指出一种或另一种方法来进行这种布局，或者告诉我我做错了什么吗？

感谢您的关注。谢谢。

编辑

在我正在测试的系统中，我使用的是 Java EE (JSP/EL)，因此为了简单起见，我决定省略代码。我对它做了一些改动，让它只保留在 HTML 和 CSS 中，下面是它的一个片段:

HTML:

<div class="folha">
    <table>
        <tr>
            <td>SEX</td>
            <td>BIRTHDAY</td>
        </tr>
        <tr>
            <td><input type="text" name="sex" placeholder="sex"/></td>
            <td id="date">
                <input type="text" name="day" placeholder="day"/>
                <span>/</span>
                <input type="text" name="month" placeholder="month"/>
                <span>/</span>
                <input type="text" name="year" placeholder="year"/>
            </td>
        </tr>
    </table>
</div>

CSS:

.folha table,
.folha td
{
    border: 1px black solid;    /* DEBUG */
}

.folha table
{
    width: 92.5%;
    margin: 0px auto;

    border-spacing: 60px 0px;
}

.folha table input[type="text"]
{
    width: 100%;
    height: 30px;

    text-align: center;

    border: 1px red solid;      /* DEBUG */
}

.folha table tr:nth-child(odd) td
{
    padding: 16px 0px;
}

.folha #date input
{
    width: 20%;
}

视觉上，我得到以下结果(同一图像中有 2 个):

我希望字段与我问题的第一张图片保持一致，即对齐并正确拉伸(stretch)。我不是 CSS 专家，所以我正在学习使用它。如果有人对如何执行此操作有任何其他建议，我会将答案视为有效。

Answer 1

编辑现在源代码可用:

所以如果你想让两列的宽度相同，你应该在.folha td下指定。

日期输入似乎基于其父单元格宽度的百分比宽度，这意味着如果您将其设置为 33% 或类似的值，它们将循环到一个新行，因为三个输入(加上间隔符!) 不再适合。

坦率地说，我认为日期输入不可能完全占据 100% 的空间，因为它们之间的间隔是以像素为单位指定的。如果您真的希望日期输入恰好占据 100% 的空间，您还需要使用百分比设置间隔符的宽度。

我还会考虑在表格本身上设置最大和最小宽度，以避免在极端浏览器尺寸下出现意外结果。

我希望这对您有所帮助:)