Question

我想让表单看起来宽1200像素。但是，当我在类.container或.form-group中设置宽度，甚至在表单标签中设置宽度时，它都不会起作用。只有当我在textarea标签中设置宽度时它才会起作用。有什么问题？

的index.html

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>

<body>
<div class="container">
<form>
        <div class="form-group">
            <textarea class="status-box"></textarea>
        </div>
</form>
</div>
</body>

</html>

的style.css

.container {
    width: 1200px;
    margin-top: 20px;
}

Answer 1

您的容器尺寸很好 - 但如果您希望元素填充容器，则需要单独设置它们的宽度。

E.g。

.container { width: 1200px; }

textarea, input { width: 100%; }

Answer 2

如果您希望textarea填充1200px，只需在CSS代码中添加此行：

textarea {width: 100%;}

See it here

Answer 3

还在CSS Class中提供一些高度

.container {
    width: 1200px;
    margin-top: 20px;
min-height:10px // or Height:whatever the height you prefers
}

Answer 4

没有问题。正如您所看到的那样，宽度已经处于活动状态，因为没有标识，所以它没有显示。 snippet here。如果您将css更改为如下所示，您可以自己查看。

.container {
    width: 1200px;
    margin-top: 20px;
    background-color:blue; <-- This will show the full width of your div in a color
}

Answer 5

为确保CSS知道应用的位置，您应该在样式文件中尝试：

.container .form-group {
  width: 1200px;
  margin-top: 20px;
}

或者，如果您要缩小文字区域的大小，则需要使用行和 cols 属性：http://www.w3schools.com/tags/tag_textarea.asp < / p>

Answer 6

请在容器类中添加“background-color：grey”。您将看到div宽度有效。宽度用于div，而不是div中的内容。所以正确的方法是向textarea添加宽度。

无法设置html div宽度

6 个答案: