|
|
06.06.2013, 13:46
|
 |
Аспирант
|
|
Регистрация: 14.05.2011
Сообщений: 61
|
|
|
Непонятное поведение бордеров
Здравствуйте.
Есть 5 текстовых полей инпут, каждый из них обернут в абзац (<p>). В конце каждого поля добавлены по тегу <span> с картинкой внутри. Проблема в том, что никак не могу выравнять бордеры этих полей и span. Поля 2 и 4 - нормально выравнялись, остальные нет. Подскажите, пожалуйста, почему так происходит? Также хочется понять здесь логику такого поведения.
Ссылка (все не нужное выбросил, минимум кода):
http://sergcloud.ru/borders/ |
|
06.06.2013, 16:55
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,304
|
|
antserg, не верь инпутам. 
Работай только с однотипными элементами. Например с теми же спанами...
В один из них засунь инпут без бордюров с нужной шириной и высотой.
|
|
06.06.2013, 17:27
|
|
Аспирант
|
|
Регистрация: 14.05.2011
Сообщений: 61
|
|
|
Огромное вам спасибо. Вы правы.
|
|
06.06.2013, 20:10
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
может так
<span style="white-space: nowrap; border: solid 1px gray; padding: 0.1em; border-radius: 0.2em;">
<input value="через:" style="outline-style: none; border: none;">
<img src="http://sergcloud.ru/borders/i/x.png">
</span>
Последний раз редактировалось bes, 06.06.2013 в 20:14.
|
|
07.06.2013, 16:02
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от ksa
|
|
antserg, не верь инпутам.
|
Текстовые инпуты нормально стилизуются и выравниваются. У меня бывали проблемы с чекбоксами и радио, и то наверно сам виноват. |
|
14.06.2013, 06:42
|
|
Профессор
|
|
Регистрация: 21.12.2010
Сообщений: 243
|
|
danik.js,
сходу вспоминается, например, это
|
|
14.06.2013, 06:50
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Nanto, не сталкивался. Сложно представить случай, когда нужно инпутам указать padding в процентах..
|
|
14.06.2013, 07:07
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от antserg
|
|
Есть 5 текстовых полей инпут, каждый из них обернут в абзац (<p>). В конце каждого поля добавлены по тегу <span> с картинкой внутри. Проблема в том, что никак не могу выравнять бордеры этих полей и span. Поля 2 и 4 - нормально выравнялись, остальные нет. Подскажите, пожалуйста, почему так происходит? Также хочется понять здесь логику такого поведения.
|
Не проще ли - сделать инпуты прозрачными, без бордеров и поставить нужную фоновую картинку на обрамляющий тег <p> ? |
|
14.06.2013, 07:17
|
|
Профессор
|
|
Регистрация: 21.12.2010
Сообщений: 243
|
|
Сообщение от danik.js
|
|
Nanto, не сталкивался. Сложно представить случай, когда нужно инпутам указать padding в процентах..
|
Бывает... Иногда старые костыли вылезают, иногда ещё что-то... Ну допустим надо инпут на всю ширину растянуть - ? |
|
14.06.2013, 07:24
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от Nanto
|
|
Ну допустим надо инпут на всю ширину растянуть
|
И как проценты паддинга помогут? Бордер то в процентах не задашь.
Решение - использовать box-sizing: border-box и никакие проценты не нужны. |
|
|
|
