将填充添加到textarea会将元素推送到div之外

Question

将填充添加到textarea会将元素推送到div之外

Joh*_*ith 4 html css html5 textarea css3

我似乎无法绕过这一个.

似乎通过在我的textarea中添加一些填充(padding-left:3px),并将其从边框推出我的div.在摘要框内为文本添加一些填充将非常有用,因为它对用户来说更易读.

结果如下: 在此输入图像描述

它应该是这样的: 在此输入图像描述

这是HTML/CSS标记:

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
.fcontent_text {
    font-size: 8.5pt;
    text-align: right;
    color: rgb(11,63,113);
}
#fcontent_container {
    width: 800px;
    display: block;
    position: relative;
    margin: 5px;
}
#fcontent_wrapper {
    border: 1px solid rgb(128,128,128);
}
#summary {
    width: 100%;
    margin: 0;
    border: 0;
    position: relative;
    padding-left: 3px;
    height: 50px;
}
</style>


</head>

<body>
                <div id="fcontent_container">
                    <div class="fcontent_text">Summary</div>
                    <div id="fcontent_wrapper"><textarea class="normal" id="summary"></textarea></div>
                </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Wex*_*Wex 8

添加box-sizing: border-box到#summary以便您可以设置width: 100%左右填充,而不会将内容溢出到容器中.

box-sizing

border-box

宽度和高度属性包括填充和边框,但不包括边距.这是文档处于Quirks模式时Internet Explorer使用的框模型.

要获得跨浏览器兼容性,请务必包含前缀:

#summary {
    width: 100%;
    margin: 0;
    border: 0;
    position: relative;
    padding-left: 3px;
    height: 50px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，5 月前
查看次数：	7761 次
最近记录：	12 年，5 月前