Question

我试图在测试应用程序中进行用户注册页面的布局，并且在将每个组件放置到位时遇到了麻烦。我必须说，CSS从来都不是我强大的。我的表单设计非常简单，没什么特别的。看：

enter image description here

我可以完美地设计所有内容，页面轮廓，标题，客户提供的每组字段的会话。但是......我的问题在于生日场的布局。我尝试在表格中设置用户输入字段的样式，或多或少遵循此方案：

enter image description here

在该计划中，我将每个会话的内容（会话是绿色部分）的红色部分。请注意，我们有一个包含两列和6行的表，使用样式参数＆＃34; border-spacing＆＃34;。

作为最终结果，日，月和年字段（dd / mm / yyyy）总是停留在不同的行中，或导致第二列水平变宽。他们最终获得了我不想要的尺寸。在这种类型的样式中，我正在创建一个没有定义宽度的页面（我正在分配宽度为＆＃34;％＆＃34;的字段），允许用户根据需要进行拉伸。 我也避免使用JavaScript或字段类型＆＃34; date＆＃34; ，它只与某些浏览器兼容。

有人可以指点我做一种这样的布局，或者告诉我我做错了什么？

感谢您的关注。谢谢。

修改

在我测试的系统中，我使用的是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个）：

enter image description here

我希望这些字段与我的问题的第一张图像保持一致，即对齐并正确拉伸。我不是CSS的专家，所以我学习使用它。如果有人对如何做到这一点有任何其他建议，我会接受答案为有效。

Answer 1

现在编辑源代码可用：

因此，如果您希望两列的宽度相同，则应在 .folha td 下指定。

日期输入似乎是将其百分比宽度偏离其父单元格的宽度，这意味着如果将其设置为33％或某些此类值，它们将循环到新行，因为三个输入（加上间隔符）！）不再适合。

坦率地说，我不认为日期输入可能占据空间的100％，因为它们之间的间隔物以像素为单位指定。如果您确实希望日期输入占据100％的空间，则还需要使用百分比设置间隔物的宽度。

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

我希望这有用：）

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

修改

1 个答案: