我有下面的CSS和HTML片段正在呈现。
文本区域 ｛ 边框:1px实体#999999; 宽度:100%; 保证金:5 px 0; 填充:3 px; ｝ <div style="display: block;" id="rulesformitem" class="formitem"> <label for="rules" id="ruleslabel">规则:</label> <textarea cols="2" rows="10" id="rules"> < / div >
问题是文本区域最终比父区域宽8px(边界为2px +填充为6px)。是否有一种方法继续使用边框和填充，但限制文本区域的总大小为父的宽度?
当前回答
许多CSS格式问题的答案似乎是“添加另一个<div>!”
所以，在这种精神，你有没有尝试添加一个包装div的边界/填充应用，然后把100%宽度的文本区域里面?比如(未经测试):
文本区域 ｛ 宽度:100%; ｝ .textwrapper ｛ 边框:1px实体#999999; 保证金:5 px 0; 填充:3 px; ｝ <div style="display: block;" id="rulesformitem" class="formitem"> <label for="rules" id="ruleslabel">规则:</label> <div class=" texttwrapper "><textarea cols="2" rows="10" id="rules"/></div> < / div >
其他回答
不，CSS不能这样做。这就是微软最初引入另一种可能更实用的盒子模型的原因。最终获胜的盒子模型使得混合百分比和单位不切实际。
我不认为这是可以与你表达填充和边界宽度的百分比的父。
许多CSS格式问题的答案似乎是“添加另一个<div>!”
所以，在这种精神，你有没有尝试添加一个包装div的边界/填充应用，然后把100%宽度的文本区域里面?比如(未经测试):
文本区域 ｛ 宽度:100%; ｝ .textwrapper ｛ 边框:1px实体#999999; 保证金:5 px 0; 填充:3 px; ｝ <div style="display: block;" id="rulesformitem" class="formitem"> <label for="rules" id="ruleslabel">规则:</label> <div class=" texttwrapper "><textarea cols="2" rows="10" id="rules"/></div> < / div >
如果你不太介意填充的宽度，这个解决方案实际上会保持填充的百分比。
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
不完美，但你会得到一些填充和宽度加起来是100%，所以这一切都很好
如果你像这样填充和偏移:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
textarea的右侧与容器的右侧完美对齐，textarea内的文本与容器中的正文完美对齐……和左侧的textarea“突出”一点。它有时更漂亮。
填充值也起着一定的作用。使用你发布的风格:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
宽度已经填满，左、右填充为3px。所以会有溢出。
如果你改变你的风格如下:
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding: 3px 1%;
}
我的样式现在所做的是它的宽度为98%剩下的2%完成100%这就是为什么我给左填充1%右填充1%的原因。这样，溢出的问题就可以解决了
