保留左邊和寬邊的div：右側溢出100％

Question

我有2個嵌套的div應該是100％寬。 不幸的是，帶有Textbox的內部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％寬。 您只需將textarea寬度設置為100％即可。

Answer 3

我意識到這是一個很老的帖子，但這可能會讓像我這樣的人從谷歌搜索來到這個頁面並且他們的智慧結束。

這里給出的其他答案都沒有給我工作，我已經放棄了希望，但今天我正在尋找解決另一個類似問題的解決方案，我在SO上找到了多次回答。 接受的答案適用於我的div，我突然想到嘗試使用我以前的文本框問題 - 它有效！ 解決方案：

將box-sizing: border-box到文本框的樣式。

要使用CSS將其添加到所有多行文本框，請將以下內容添加到樣式表中：

textarea
{
  box-sizing: border-box;
}

感謝thirtydot提供的解決方案

寬度：100％-padding？

和

當寬度設置為100％時，div的內容比div本身更長？

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

如果布局的某些其他部分影響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 6

在頭部或外部文檔中添加一些css。 asp：TextBox呈現為輸入：

input {
     width:100%;
}

你的HTML應該是這樣的： http ： //jsfiddle.net/c5WXA/

請注意，這將影響您的所有文本框：如果您不想這樣，請為包含div的類提供一個類並指定css。

.divClass input {
     width:100%;
}