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%?