如何在表单上布置文本和输入以适合特定宽度(对齐)？

Question

如何在表单上布置文本和输入以适合特定宽度(对齐)？

我有一个表单,我试图使一行"对齐",所以整行(这是一个4个文本框和标签),以适应精确的像素宽度(比如800px).通常情况下,如果我只是在没有任何特殊的CSS的情况下进行布局,那么它不到800px.我想把它"拉伸"到800px.我不在乎是否必须拉伸文本框或它们之间的空格.

这与MS word中的合理布局类似,如果这有助于描述我正在寻找的内容.这是否可以在表单布局中的html/css中进行？

Answer 1

Bal*_*usC 5

您基本上需要text-align-last: justify指定块元素中"最后一行文本"的对齐方式,默认为标准方向,即leftLTR.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 15994654</title>
        <style>
            #fields {
                width: 1000px;
                border: 1px solid gray;
            }

            .justified {
                text-align-last: justify;
            }
        </style>
    </head>
    <body>
        <p id="fields" class="justified">
            <label for="input1">label1</label>
            <input id="input1" />
            <label for="input2">label2</label>
            <input id="input2" />
            <label for="input3">label3</label>
            <input id="input3" />
            <label for="input4">label4</label>
            <input id="input4" />
        <p>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这适用于IE和Firefox(对于较旧的Firefox版本,-moz-text-align-last: justify必要时添加),但是在基于Webkit的浏览器(Chrome/Safari)中失败.为了覆盖这些浏览器,您需要更换.justified如下,以便最后一行不再显示为"最后一行",这样text-align: justify可以按照常规方式完成其工作:

.justified {
    text-align: justify;
}

.justified:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

请注意,text-align-last: justify这种方式变得多余.

这是jsfiddle演示.

归档时间：	12 年，8 月前
查看次数：	1853 次
最近记录：	12 年，7 月前