带 margin-left 和 width:100% 右侧溢出的 Div

Question

我有 2 个嵌套的 div，宽度应该是 100%。不幸的是，带有文本框的内部 div 溢出，并且实际上比外部 div 更大。它有一个左边距，并且溢出了大约该边距的大小。

我该如何解决这个问题？

<div style="width:100%;">
    <div style="margin-left:45px; width:100%;">
    <asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
    </div>
</div>

如果我不做 100%，那么文本框就不是 100% 宽。

Answer 1

只需删除两个 div 的宽度即可。

div 是一个块级元素，将使用所有可用空间（除非您开始浮动或定位它们），因此外部 div 将自动为 100% 宽，内部 div 将使用设置后的所有剩余空间左边距。

我在 jsfiddle 上添加了一个带有 textarea 的示例。

使用输入更新了示例。

Answer 2

div 是块元素，默认情况下为 100% 宽。您只需将文本区域宽度设置为 100% 即可。

Answer 3

如果布局的其他部分影响 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>

如果仍然不起作用，我们可能需要查看您的布局 HTML/CSS 的更多内容

Answer 4

<div style="width:100%;">
    <div style="margin-left:45px;">
       <asp:TextBox ID="txtTitle" runat="server" Width="100%"></asp:TextBox><br />
    </div>
</div>

Answer 5

在 head 或外部文档中添加一些 css。 asp:TextBox 作为输入呈现：

input {
     width:100%;
}

您的 html 应如下所示： http://jsfiddle.net/c5WXA/

请注意，这将影响您的所有文本框：如果您不希望这样，请为包含的 div 指定一个类并指定 css。

.divClass input {
     width:100%;
}

Answer 6

我意识到这是一篇旧文章，但这可能会让那些像我一样通过谷歌搜索来到此页面并且束手无策的人受益。

这里给出的其他答案都不适合我，我已经放弃了希望，但今天我正在寻找 div 的另一个类似问题的解决方案，我发现这个问题在 SO 上得到了多次回答。接受的答案适用于我的 div，我突然想到尝试解决我之前的文本框问题 - 它有效！
解决方案：

在文本框的样式中添加box-sizing: border-box。

要将其添加到使用 CSS 的所有多行文本框，请将以下内容添加到样式表中：

textarea
{
  box-sizing: border-box;
}

感谢 thirddot 在

宽度：100%-padding？

和

当宽度设置为100%时，div的内容比div本身更长？