Question

我正在处理一个水平布局的表单：

 <div id="container">
  <label for="ta">description</label>
  <textarea id="ta" name="ta" cols="50" rows="10"></textarea>
 </div>

问题在于我想要的是textarea占用标签在同一行留下的所有可用空间。如果我尝试使用 width = 100％，它会跳转到下一行：

div * {
    vertical-align: middle;
}
textarea {
    width: 100%;
    height: 300px;
}

是否有任何想法实现它而没有为每个标签分配固定空间？

Answer 1

喜欢这个？ http://jsfiddle.net/4QbMr/

<div id="container">
    <label for="ta">description</label>
    <div class="twrap"><textarea id="ta" name="ta" cols="50" rows="10"></textarea></div>
</div>

label {
    float: left
}
.twrap {
    overflow: hidden;
    padding: 0 4px 0 12px
}
textarea {
    width: 100%;
    height: 300px;
}

Answer 2

对于CSS的表格式行为，display: table is your friend：

#container {
    display: table;
    width: 100%;
}
#container label, #container textarea {
    display: table-cell;
    vertical-align: top;
}
#container textarea {
    width: 100%;
    height: 300px;
}

请注意，如果您指定cols和rows属性，它们将覆盖您的CSS。

Answer 3

http://jsfiddle.net/N9hvU/27/

我认为这是你正在寻找的行为。即使我更喜欢使用div / spans进行元素定位;表格具有独特的行为（根据我的经验;不知道这是否符合w3规范）不允许项目进入下一行;无论他们变得多大。

因此，通过将表格行宽度设置为100％，并将单元格宽度与文本区域设置为100％，文本区域将使用任何可用宽度。

<div id="container">
    <table>
        <tr style="width:100%;">
            <td>
                <label for="ta">description</label>
            </td>
            <td style="width:100%;">
                <textarea id="ta" name="ta"></textarea>
            </td>
        </tr>
    </table>
</div>

Answer 4

使用小于100％的百分比并省略textarea.try中的cols http://jsfiddle.net/bingjie2680/Bw4MR/

更新：试试这个：http://jsfiddle.net/bingjie2680/Bw4MR/3/您需要使用表来完成这项工作。

Answer 5

您需要指定标签的宽度。喜欢

标签{宽度：20％; } textarea {width：80％; }

我会在div和textarea中将标签放在不同的div中并浮动两个div（并指定两者的宽度）。

CSS：强制textarea占用所有可用区域

5 个答案: