Поле ввода не будет корректно задано

Question

У меня есть действительно раздражающая проблема с калибровкой поля ввода, и я не понимаю, как это работает.

У меня этот код. HTML:

<div class="container"> 

    <div class="receipt"> 
    <p class="location"></p> 
    <input type="text" id="checkoutField"> 

    <div class="checkoutButton"> 
    <a href="#/checkout"> 
     <p>some button</p> 
    </a>   
    </div> 

    </div> 
</div> 

Контейнер имеет максимальную ширину 480 пикселей. И я хочу, чтобы и checkoutButton div, и поле ввода растянулись до этого предела ширины, а также имели 20px margin с обеих сторон. Элементы также должны реагировать, поэтому они не имеют фиксированного размера.

Это прекрасно работает на DIV, но я не могу получить поле ввода работать так же .. я сделал jsfiddle, который включает в себя CSS код Aswell: jsfiddle

Почему вход ведет себя, как это и как я исправлю это?

Answer 1

Вместо того, чтобы набирать маржу слева & Право на отдельные элементы, это лучшее дополнение для родительского контейнера. Chk Модифицированный код - http://jsfiddle.net/k7vzod4y/3/

.receipt { 
    padding: 0 20px 24px; 
} 
.receipt .checkoutButton { 
    margin: 0; 
} 
.receipt #checkoutField { 
    width: 100%; 
    margin: 0; 
} 

Надежда, что помогает.

Answer 2

Итак, посмотрев на пример кода, я бы использовал следующий метод. Я использовал следующее в JSFiddle, которое вы связали, и это сработало, поскольку вы упомянули, что хотите.

Установите ширину поля ввода до 100%:

.receipt #checkoutField { 
    border: 0; 
    width: 100%; 
    height: 40px; 
    background-color: #35aba2; 
    border-radius: 4px; 
    margin-top: -6px; 
    margin-left: 20px; 
    margin-right: 20px; 
} 

И тогда ширина 100% на кнопку кассе, а также:

.receipt .checkoutButton { 
    width: 100%; 
    height: 50px; 
    background-color: #35aba2; 
    border-radius: 4px; 
    margin-left: 20px; 
    margin-right: 20px; 
    cursor: pointer; 
    margin-top: -6px; 
} 

Этот метод также реагирует, потому что использовали проценты, которые являются связанными единицами, поэтому они наследуют оттуда родителя. Таким образом, ширина 100% всегда будет находиться на полной ширине своего родителя, независимо от размера видового экрана.

Answer 3

можно легко используя CSS3 calc функция. Вы можете установить ширину в 100% - 40px, чтобы позаботиться о своих полях. Что-то вроде этого:

.receipt #checkoutField { 
    width: calc(100% - 40px); 
    border: 0; 
    height: 40px; 
    background-color: #35aba2; 
    border-radius: 4px; 
    margin-top: -6px; 
    margin-left: 20px; 
} 

Вы можете увидеть это в действии в вас обновленный fiddle