我在某些div块中遇到textarea
的问题。无论我做什么,它都不会接受块的完整width
。我尝试给它一个固定的100%width
,我尝试给它更多的cols,我尝试在浏览器中手动增加大小,它只是不会填满整个容器而我不明白为什么。它起作用,好像右边有一个看不见的col,但是没有。
**注意:** textarea
之前的文本部分(testwethsfjg .....)只是为了查看文本是否与textarea
绑定在同一边界上。< / p>
也许有人知道问题可能是什么。帮助将不胜感激。
CODE
.comment-box {
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 20px;
margin-left: 200px;
margin-right: 200px;
background-color: #e9dac6;
border-radius: 25px;
border: 3px solid green;
}
.comment-box-empty {
margin-bottom: 20px;
background-color: white;
border-radius: 25px;
border: 1px solid black;
}
.comment-box-full {
margin-top: 20px;
margin-bottom: 0px;
margin-left: 30px;
margin-right: 30px;
background-color: white;
border-radius: 25px;
border: 1px solid black;
}
.comment-box-top {
margin: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #faebd7;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border: none;
width: 100%;
height: 100%;
}
.comment-box-top-text {
font-size: 19px;
font-weight: bold;
line-height: 1;
width: auto;
height: auto;
display: inline;
}
.comment-box-content {
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
border: none;
width: 100%;
}
.comment-box-content-text {
text-align: justify;
font-size: 17px;
font-weight: 400;
line-height: 1.25;
}
&#13;
<div class="comment-box">
<div class="comment-box-empty">
<form id="usr_comment">
<div class="comment-box-top">
<div class="comment-box-top-text">
<label for="name">Name:</label>
<input type="text" size="10" name="name" />
<label for="email">Email:</label>
<input type="email" size="15" name="email" />
<br />
<input type="checkbox" name="show_mail" value="showmail" checked />
<label for="show_mail">E-Mail für alle Sichtbar anzeigen?</label>
<br />
</div>
</div>
<div class="comment-box-content">
testwethsfjggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
<br />
<textarea></textarea>
<br />
<br />
<button type="submit" class="btn btn-primary btn-sm">Post</button>
</div>
</form>
</div>
@{ foreach (var comment in ViewBag.rb1.CommentList) { if (ViewBag.rb1count > 0) {
<div class="comment-box-full">
<div class="comment-box-top">
<div class="comment-box-top-text">
@comment.Name @comment.Email
</div>
</div>
<div class="comment-box-content">
<div class="comment-box-content-text">
@comment.Content
</div>
</div>
</div>
} } }
</div>
&#13;
答案 0 :(得分:2)
您需要将width:100%
提交给textarea
,如果还没有,请重置margin/padding
,并停止重新调整width
的大小,我可以使用resize:none
}或resize:vertical
取决于您的情况
这是一个示例:
div {
width: 500px;
border: red solid;
box-sizing: border-box;
padding: 5px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
resize:vertical
}
<div>
<textarea></textarea>
</div>
答案 1 :(得分:0)
实际上你可以设置你的textarea的宽度,但是一旦用户手动更改它,css就不再工作了,所以你可以添加一个resize:none来确保textarea的宽度
textarea {
resize: none;
width: 90%;
}