4

我有一个表格，我正在尝试使一行“合理”，以便整行（这是一个 4 个文本框和标签）适合精确的像素宽度（比如说 800 像素）。通常，如果我只是在没有任何特殊 css 的情况下进行布局，它小于 800px。我想将其“拉伸”为 800 像素。我不在乎是否必须拉伸文本框或它们之间的空格。

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

4

5 回答 5

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>

这在 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%;
}

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

这是jsfiddle 演示。

于 2013-04-20T14:57:34.370 回答
3

实际上，使用纯 CSS 使用text-align: justify;.

您没有成功，因为对齐对最后一行不起作用（当只有一行时，它被认为是最后一行）。有一个 CSS3 属性可以设置最后一行的文本对齐方式：text-align-last。不幸的是，它没有得到广泛支持。

解决方案是产生一个额外的元素，该元素将下降到下一行，然后第一行将是合理的： 

<form>
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
</form>

form {
  width: 800px;
  text-align: justify;    /* Can we really make this work? Sure! */
}

input {
  display: inline-block;  /* making elements respect text-align */
}


form:after {
  content: "";            /* creating a hidden element that drops to next line */
  display: inline-block;  /* making it respect text-align and width */
  width: 100%;            /* forcing it to drop to next line */
}

演示： http: //jsbin.com/ituroj/5/（点击右上角的“编辑”来修改代码）。

结果：语义化、没有 HTML 占用空间、最少的 CSS 代码、完整的浏览器支持。

于 2013-04-25T13:31:36.123 回答
1

一种方法是：

input[type=text] {
    width: 25%;
    box-sizing: border-box;
}

或者，如果字段确实在此 Fiddle<table/>中的类似内容中，则可以将文本框的 设置为，以便表格控制宽度：width100%

input[type=text] {
    width: 100%;
    box-sizing: border-box;
}
于 2013-04-14T01:12:55.247 回答
1

您可以通过将输入和标签嵌套在按百分比确定宽度的“列”内来实现 - 这样您就可以控制表单的宽度并且输入将保持合理。

HTML

<form>
    <div class="col4">
        <label>Input</label>
        <div class="inputWrapper">
                <div class="textInput">
                    <input type="text"/>
                </div>
        </div>
    </div>
    <div class="col4">
        <label>Input</label>
        <div class="inputWrapper">
                <div class="textInput">
                    <input type="text"/>
                </div>
        </div>
    </div>
    <div class="col4">
        <label>Input</label>
        <div class="inputWrapper">
                <div class="textInput">
                    <input type="text"/>
                </div>
        </div>
    </div>
    <div class="col4 last">
        <label>Input</label>
        <div class="inputWrapper">
                <div class="textInput">
                    <input type="text"/>
                </div>
        </div>
    </div>
</form>

CSS

form{
    width:800px;
}

.col4{
    width:23.5%;
    margin-right:2%;
    float:left;
}

.last{
    margin:0;
}

.inputWrapper{
    width:100%;
}

.textInput{
    border:1px solid #ccc;
    display:block;
    padding:5px;
}

.textInput input{
    width:100%;
    border:none;
    padding:0;
}

您可以在此处查看 jsFiddle 示例http://jsfiddle.net/patricklyver/4mbks/

于 2013-04-23T05:09:38.157 回答
0

你可以float结合box-sizing. 您将不得不浮动，因为表单在不同的浏览器中具有不同的怪异之处。例如，在 OS X 上的 Safari 中，顶部总是有一个隐藏的 1px 填充。

JSfiddle

HTML

<form id="myForm">
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />
    <div class="clear"></div>
</form>

CSS

#myForm {
    border: 1px solid blue;
    width: 800px;
}

#myForm input[type=text] {
    margin: 0px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 25%;
    border: 0px;
    background-color: orange;
}

#myForm .clear {
    clear: both;
}
于 2013-04-20T14:56:17.640 回答