CSS: текстовое поле для заполнения родительского контейнера
В таких случаях общий трюк (был?) для возврата назад:
for(int i = l.size() - 1; i >= 0; i --) {
if (l.get(i) == 5) {
l.remove(i);
}
}
Тем не менее, я более чем счастлив, что у вас есть лучшие способы в Java 8, например. removeIf или filter в потоках.
6 ответов
Можно окружить текстовое поле <div> и дать это <div> padding: 0 20px. Ваша проблема состоит в том, что 100% шириной не включает дополнения или граничных значений; эти значения добавляются сверху 100% шириной, таким образом переполнение.
Из-за пути Поле-Modell определяется и реализовало, я не думаю, что существует решение только для CSS этой проблемы. (Кроме того, что описал Matthew: использование процента для дополнения также, например, ширины: 94%; дополнение: 0 3%;)
Вы могли однако создать некоторый код JavaScript для вычисления ширины dynmically на загрузку страницы... гм, и то значение должно будет, конечно, также быть обновлено каждый раз, когда browserwindow изменен.
Интересный побочный продукт некоторого тестирования я сделал: Firefox делает , устанавливает ширину поля ввода к 100%, если дополнительно к width: 100%; Вы также устанавливаете макс. ширину на 100%. Это не работает в Opera 9.5 или IE 7 хотя (не протестировали более старые версии).
@Domenic это не работает. автоматическая ширина ничего не делает больше затем поведение по умолчанию того элемента, потому что начальное значение ширины является автоматическим (см. страницу 164, Пересмотр Уровня 2 Каскадных таблиц стилей 1 Спецификация). Присвоение дисплея блока типа не работает также, это просто говорит браузеру использовать поле блока при отображении элемента, и не присваивает поведение по умолчанию взятия, как можно больше пространства как отделение делает (см. страницу 121, Пересмотр Уровня 2 Каскадных таблиц стилей 1 Спецификация). То поведение обрабатывается визуальным агентом пользователя не определение HTML или CSS.
Это поведение вызывается различными интерпретациями модели поля. Корректная модель поля указывает, что ширина применяется только к содержанию, и дополнение и поле прибавляют к нему. Поэтому Ваш получают 100% плюс правое и левое дополнение на 20 пкс, равняющееся 100% + 40 пкс как общая ширина. Исходная модель поля IE, также известная как режим причуд, включает дополнение и поле в ширине. Таким образом, ширина Вашего содержания составила бы 100% - 40 пкс в этом случае. Поэтому Вы видите два различных поведения. Насколько я знаю, что нет никакого решения для этого существует однако работа вокруг путем установки ширины для высказывания 98% и дополнение к 1% на каждой стороне.
я полагаю, что можно ответить на переполнение отрицательным полем. т.е.
margin: -1em;
Это, к сожалению, невозможно с чистым CSS; Модификации HTML или Javascript необходимы для любого нетривиального гибкого, но ограниченного поведения пользовательского интерфейса. Столбцы CSS3 в некоторой степени помогут в этом отношении, но не в таких сценариях, как ваш.
Решение Дэвида является самым чистым. Это не совсем случай divitis - вы не добавляете кучу div без надобности и не даете им имена классов, такие как «p» и «h1». Он служит определенной цели, и в этом случае хорошо то, что это также расширяемое решение - например, вы можете добавить закругленные углы в любое время, не добавляя ничего дополнительного. Доступность также не затронута, так как они пустые div.
Черт, вот как я реализую все свои текстовые поля:
<div class="textbox" id="username">
<div class="before"></div>
<div class="during">
<input type="text" value="" />
</div>
<div class="after"></div>
</div>
После этого вы можете использовать CSS для добавления закругленных углов, добавления отступов, как в вашем случае, и т.д., но вы также можете не обязательно - вы можете полностью скрыть эти боковые div и иметь только обычное текстовое поле ввода.
Другие решения - использовать таблицы, например, Amazon использует таблицы для получения гибкого, но ограниченного макета, или использовать Javascript для настройки размеров и обновления их при изменении размеров окна, например, Google Документы, Карты и т. д. все это делают.
В любом случае, мои два цента: не позволяйте идеализму мешать практичности в таких случаях, как этот. :) Решение Дэвида работает и практически не загромождает HTML (и, фактически, использование семантических имен классов, таких как «до» и «после», все еще очень чисто, imo).
вот как я реализую все свои текстовые поля:<div class="textbox" id="username">
<div class="before"></div>
<div class="during">
<input type="text" value="" />
</div>
<div class="after"></div>
</div>
После этого вы можете использовать CSS для добавления закругленных углов, добавления отступов, как в вашем случае, и т. д., но вы также не обязаны - вы можете полностью скрыть эти боковые блоки div и иметь только обычное текстовое поле ввода.
Другие решения - использовать таблицы, например, Amazon использует таблицы, чтобы получить гибкий, но ограниченный макет, или использовать Javascript для настройки размеров и обновления их на изменение размеров окна, например, Google Docs, Maps и т. д. все это делают.
В любом случае, мои два цента: не позволяйте идеализму мешать практичности в подобных случаях. :) Решение Дэвида работает и практически не загромождает HTML (и, фактически, использование семантических имен классов, таких как «до» и «после», все еще очень чисто, imo).
вот как я реализую все свои текстовые поля:<div class="textbox" id="username">
<div class="before"></div>
<div class="during">
<input type="text" value="" />
</div>
<div class="after"></div>
</div>
После этого вы можете использовать CSS для добавления закругленных углов, добавления отступов, как в вашем случае, и т. д., но вы также не обязаны - вы можете полностью скрыть эти боковые блоки и иметь только обычное текстовое поле ввода.
Другие решения - использовать таблицы, например, Amazon использует таблицы, чтобы получить гибкий, но ограниченный макет, или использовать Javascript для настройки размеров и обновления их на изменение размеров окна, например, Google Docs, Maps и т. д. все это делают.
В любом случае, мои два цента: не позволяйте идеализму мешать практичности в подобных случаях. :) Решение Дэвида работает и практически не загромождает HTML (и, фактически, использование семантических имен классов, таких как «до» и «после», все еще очень чисто, imo).
После этого вы можете использовать CSS для добавления закругленных углов, добавления отступов, как в вашем случае, и т. д., но вам также не обязательно - вы можете полностью скрыть эти боковые блоки div и иметь только обычное текстовое поле ввода.. Другие решения - использовать таблицы, например, Amazon использует таблицы, чтобы получить гибкий, но ограниченный макет, или использовать Javascript для настройки размеров и обновления их при изменении размеров окна, например, Google Docs, Maps и т. Д. Все это делают.
В любом случае, мои два цента: не позволяйте идеализму мешать практичности в подобных случаях. :) Решение Дэвида работает и практически не загромождает HTML (и, фактически, использование семантических имен классов, таких как «до» и «после», все еще очень чисто, imo).
После этого вы можете использовать CSS для добавления закругленных углов, добавления отступов, как в вашем случае, и т. д., но вам также не обязательно - вы можете полностью скрыть эти боковые блоки div и иметь только обычное текстовое поле ввода.. Другие решения - использовать таблицы, например, Amazon использует таблицы, чтобы получить гибкий, но ограниченный макет, или использовать Javascript для настройки размеров и обновления их при изменении размеров окна, например, Google Docs, Maps и т. Д. Все это делают.
В любом случае, мои два цента: не позволяйте идеализму мешать практичности в подобных случаях. :) Решение Дэвида работает и практически не загромождает HTML (и, фактически, использование семантических имен классов, таких как «до» и «после», все еще очень чисто, imo).
re может полностью скрыть эти боковые блоки и иметь только обычное текстовое поле ввода.Другие решения - использовать таблицы, например, Amazon использует таблицы, чтобы получить гибкий, но ограниченный макет, или использовать Javascript для настройки размеров и обновлять их при изменении размеров окна, например, Google Docs, Maps и т. д. все это делают.
В любом случае, мои два цента: не позволяйте идеализму мешать практичности в таких случаях. :) Решение Дэвида работает и практически не загромождает HTML (и, фактически, использование семантических имен классов, таких как «до» и «после», все еще очень чисто, imo).
re может полностью скрыть эти боковые блоки и иметь только обычное текстовое поле ввода.Другие решения - использовать таблицы, например, Amazon использует таблицы, чтобы получить гибкий, но ограниченный макет, или использовать Javascript для настройки размеров и обновлять их при изменении размеров окна, например, Google Docs, Maps и т. д. все это делают.
В любом случае, мои два цента: не позволяйте идеализму мешать практичности в таких случаях. :) Решение Дэвида работает и практически не загромождает HTML (и, фактически, использование семантических имен классов, таких как «до» и «после», все еще очень чисто, imo).
Все это делают Google Документы, Карты и т. Д.В любом случае, мои два цента: не позволяйте идеализму мешать практичности в подобных случаях. :) Решение Дэвида работает и практически не загромождает HTML (и, фактически, использование семантических имен классов, таких как «до» и «после», все еще очень чисто, imo).
Все это делают Google Документы, Карты и т. Д.В любом случае, мои два цента: не позволяйте идеализму мешать практичности в подобных случаях. :) Решение Дэвида работает и практически не загромождает HTML (и, фактически, использование семантических имен классов, таких как «до» и «после», все еще очень чисто, imo).