Div с левым краем и шириной: 100% переполнено с правой стороны

У меня есть 2 вложенных div, которые должны быть на 100% шире. К сожалению, внутренний div с Textbox переполняется и на самом деле больше внешнего 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%.

Ответ 1

Просто удалите ширину из обоих div.

A div - элемент уровня блока и будет использовать все доступное пространство (если вы не начнете плавать или не позиционируете их), так что внешний div автоматически будет на 100% шириной, а внутренний div будет использовать все оставшееся пространство после установки левой маржа.

Я добавил пример с textarea на jsfiddle.

Обновлен пример с помощью ввода.

Ответ 2

A div является блочным элементом и по умолчанию 100% шириной. Вам просто нужно установить ширину textarea на 100%.

Ответ 3

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

Ответ 4

Если какая-либо другая часть вашего макета влияет на ширину 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

Ответ 5

Добавьте некоторые css либо в голову, либо во внешний документ. asp: TextBox отображаются как входные данные:

input {
     width:100%;
}

Ваш html должен выглядеть так: http://jsfiddle.net/c5WXA/

Обратите внимание, что это повлияет на все ваши текстовые поля: если вы этого не хотите, дайте содержащему div классу и укажите css.

.divClass input {
     width:100%;
}

Ответ 6

Я понимаю, что это старый пост, но это может принести пользу тем, кто, как и я, пришел на эту страницу из поиска Google и находится на своем пути.

Ни один из других ответов, приведенных здесь, не сработал у меня, и я уже отказался от надежды, но сегодня я искал решение другой подобной проблемы с divs, на которую я нашел несколько ответов на SO. Принятый ответ сработал для моего div, и у меня возникло внезапное представление о том, чтобы попробовать его для моей предыдущей проблемы с текстовым полем - и это сработало! Решение:

добавьте box-sizing: border-box в стиль текстового поля.

Чтобы добавить это ко всем многострочным текстовым полям с помощью CSS, добавьте в таблицу стилей следующее:

textarea
{
  box-sizing: border-box;
}

Благодаря решению тридцать для решения при

width: 100% -padding?

Содержимое div больше, чем div, когда ширина установлена на 100%?