Html 带有 margin-left 和 width:100% 的 Div 在右侧溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5637643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div with margin-left and width:100% overflowing on the right side
提问by Remy
I have 2 nested div's that should be 100% wide. Unfortunately the inner div with the Textbox overflows and is actually larger than the outer div. It has a left margin and overflows by about the size of the margin.
我有 2 个嵌套的 div，应该是 100% 宽。不幸的是，带有文本框的内部 div 溢出，实际上比外部 div 大。它有一个左边距，并溢出大约边距的大小。
How can I fix that?
我该如何解决？
<div style="width:100%;">
<div style="margin-left:45px; width:100%;">
<asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
</div>
</div>
If I don't do the 100%, then the textbox is not 100% wide.
如果我不做 100%，那么文本框就不是 100% 宽。
回答by jeroen
Just remove the width from both divs.
只需从两个 div 中删除宽度。
A divis a block level element and will use all available space (unless you start floating or positioning them) so the outer div will automatically be 100% wide and the inner div will use all remaining space after setting the left margin.
Adiv是块级元素，将使用所有可用空间（除非您开始浮动或定位它们），因此外部 div 将自动为 100% 宽，内部 div 将在设置左边距后使用所有剩余空间。
I have added an example with a textareaon jsfiddle.
我textarea在jsfiddle上添加了一个示例。
Updated examplewith an input.
使用输入更新示例。
回答by wdm
A div is a block element and by default 100% wide. You should just have to set the textarea width to 100%.
div 是块元素，默认为 100% 宽。您应该只需要将 textarea 宽度设置为 100%。
回答by David
Add some css either in the head or in a external document. asp:TextBox are rendered as input :
在头部或外部文档中添加一些 css。asp:TextBox 呈现为输入：
input {
width:100%;
}
Your html should look like : http://jsfiddle.net/c5WXA/
您的 html 应如下所示：http: //jsfiddle.net/c5WXA/
Note this will affect all your textbox : if you don't want this, give the containing div a class and specify the css.
注意这会影响你所有的文本框：如果你不想要这个，给包含的 div 一个类并指定 css。
.divClass input {
width:100%;
}
回答by Ciara
I realise this is an old post but this might benefit somebody who, like me, has come to this page from a google search and is at their wits end.
我意识到这是一篇旧帖子，但这可能会让像我一样从谷歌搜索来到这个页面并且不知所措的人受益。
None of the other answers given here worked for me and I had already given up hope, but today I was searching for a solution to another similar problem with divs, which I found answered multiple times on SO. The accepted answer worked for my div, and I had the sudden notion to try it for my previous textbox issue - and it worked! The solution:
这里给出的其他答案都没有对我有用，我已经放弃了希望，但今天我正在寻找另一个类似 div 问题的解决方案，我发现在 SO 上多次回答了这个问题。接受的答案适用于我的 div，我突然想到要为我以前的文本框问题尝试它 - 它有效！解决方案：
add box-sizing: border-boxto the style of the textbox.
添加box-sizing: border-box到文本框的样式。
To add this to all multi-line textboxes using CSS, add the following to your style sheet:
要使用 CSS 将其添加到所有多行文本框，请将以下内容添加到您的样式表中：
textarea
{
box-sizing: border-box;
}
Thanks to thirtydot for the solution at
感谢三十多点的解决方案
and
和
Content of div is longer then div itself when width is set to 100%?
回答by Calum
<div style="width:100%;">
<div style="margin-left:45px;">
<asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
</div>
</div>
回答by MikeM
If some other portion of your layout is influencing the divwidth you can set width:autoand the div(which is a block element) will fill the space
如果布局的其他部分影响了div您可以设置的宽度，width:auto并且div（这是一个块元素）将填充空间
<div style="width:auto">
<div style="margin-left:45px;width:auto">
<asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
</div>
</div>
If that's still not working we may need to see more of your layout HTML/CSS
如果这仍然不起作用，我们可能需要查看更多布局 HTML/CSS
