Непонятное поведение бордеров
Здравствуйте.
Есть 5 текстовых полей инпут, каждый из них обернут в абзац (<p>). В конце каждого поля добавлены по тегу <span> с картинкой внутри. Проблема в том, что никак не могу выравнять бордеры этих полей и span. Поля 2 и 4 - нормально выравнялись, остальные нет. Подскажите, пожалуйста, почему так происходит? Также хочется понять здесь логику такого поведения. Ссылка (все не нужное выбросил, минимум кода): http://sergcloud.ru/borders/ |
antserg, не верь инпутам. :D
Работай только с однотипными элементами. Например с теми же спанами... В один из них засунь инпут без бордюров с нужной шириной и высотой. |
Огромное вам спасибо. Вы правы.
|
может так
<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> |
Цитата:
|
danik.js,
сходу вспоминается, например, это |
Nanto, не сталкивался. Сложно представить случай, когда нужно инпутам указать padding в процентах..
|
Цитата:
|
Цитата:
|
Цитата:
Решение - использовать box-sizing: border-box и никакие проценты не нужны. |
По сабжу (браузеры всё же уточняйте - ага? а то влом перебирать все чтобы багу воспроизвести) - для инпута проставьте корректное значение font-size и будет вам щастье.
|
Цитата:
я к тому, что "width:98%; padding:0 1%;", т.е. поля не задашь в пикселях при таком раскладе, а они нужны, иначе текст будет "липнуть" к краям. |
Цитата:
Цитата:
<style>
input {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
border: 1px solid gray;
padding: 4px;
*width: 97%;
*padding: 4px 1%;
}
</style>
<input />
|
danik.js,
box-sizing распространение получил относительно недавно, поэтому есть куча кода который надо поддерживать, а не переписывать. В идеале-то, конечно, лучше использовать его (а ещё лучше без префиксов и оглядки на старых ослов). А с процентными бордерами, уже и не помню... как вариант обернуть дивкой с margin:0 1px; и инпуту width:100%; а бордеры пусть на отступы накладываются. |
Цитата:
Цитата:
<!DOCTYPE html>
<style>
body {
outline: 1px dotted blue;
}
div {
margin: 0 5px;
}
input {
width: 100%;
border: 1px solid red;
padding: 4px;
margin: 0 -5px;
}
</style>
<div><input /></div>
|
| Часовой пояс GMT +3, время: 01:27. |