如何在窗体上布局文本和输入以适应特定的宽度?

I have a form and I am trying to make a row "justified" so the entire row (which is a 4 textboxes and labels) to fit an exact pixel width (lets say 800px). Normally, if i just lay it out without any special css, It is less than 800px. I want to "stretch" it to be 800px. I don't care if I have to stretch the textboxes or the spaces in between them.

我有一个表单，我正在尝试创建一个“对齐”的行，这样整行(4个文本框和标签)就可以匹配一个精确的像素宽度(比方说800px)。通常，如果我不使用任何特殊的css，它就小于800px。我想把它“拉伸”成800px。我不在乎我是否需要拉伸文本框或者它们之间的空格。

This is similar to justified layout in MS word if that helps describe what i am looking for. Is this possible within html / css in a form layout?

这类似于MS word中的合理布局，如果这有助于描述我正在寻找的内容。在html / css的表单布局中，这是可能的吗?

5 个解决方案

#1

You basically need text-align-last: justify which specifies the justification of the "last text line" in a block element, this defaults namely to the standard direction, which is left in LTR.

基本上，您需要text-align-last: validate它指定块元素中“最后一行”的正当性，即默认为LTR中的标准方向。

<!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>

This works in IE and Firefox (for older Firefox versions, add -moz-text-align-last: justify if necessary), however this fails in Webkit based browsers (Chrome/Safari). To cover those browser as well, you'd need to replace .justified as follows, so that the last line doesn't appear as a "last line" anymore, so that text-align: justify can do its job the usual way:

这适用于IE和Firefox(对于较老的Firefox版本，添加- mozilla -text-align-last:如果有必要的话，请给出理由)，但是在基于Webkit的浏览器(Chrome/Safari)中这就行不通了。要覆盖这些浏览器，你需要替换。按如下所示进行对齐，这样最后一行就不会再出现在“最后一行”中，这样文本对齐:align: correct可以按照通常的方式进行:

.justified {
    text-align: justify;
}

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

Note that the text-align-last: justify becomes redundant this way.

注意，text-align-last:按这种方式来证明是多余的。

Here's the jsfiddle demo.

这是jsfiddle演示。

5 个解决方案

#1

更多相关文章

随机推荐