Почему Input длинее div'а в котором он находится?

Question

[Александр Беликов]

исправляю верстку после человека одного явно не мастера верстки, там собственно форма, она вся кривая и на разном экране по разному, смотрю в код, там он разным полям дал ширину 91% и 71%, они должны быть совершенно разного размера но почему то кажутся что одного, и еще в 100% они длинее div'а в котором лежат, кто знает как сделать чтобы инпут в 100% принимал размер дива?

Comments

[Виталий Инчин ☢]

Код можно?

Answer 1

[Andrew]

В помощь htmlbook.ru/css/box-sizing

Answer 2

[Кирилл Туровников]

Крайне перегруженные селекторы, нет нужны указывать полную вложенность. Код лучше показывать на jsfiddle или codepen. В других ответах вам все верно указали про свойство box-sizing:border-box; вот ваш пример jsfiddle.net/straj/nzx42mwq

Answer 3

[Юлия Старченко]

Может быть у input есть padding, тогда ширина этого input = 100% + отступы. Тогда можно задать box-sizing: border-box и padding учитываться не будет. Но было бы проще, если бы вы показали код, т.к. сейчас это пальцем в небо или гадание на кофейной гуще.

Answer 4

[Александр Беликов]

<div class="form-block">
            <div class="line-first">
                <input placeholder="First Name" id="shipping_firstname" name="shipping[firstname]" class="inp step4 small-input first-item" value="">
                <input placeholder="Last Name" id="shipping_lastname" name="shipping[lastname]" class="inp step4 small-input" value="">
                <div class="clear"></div>
            </div>
            <div class="line-large"><input placeholder="Street" id="shipping_street" name="shipping[street]" class="inp step4 input-address" value=""></div>
            <div class="line-small">
                <input placeholder="City" id="shipping_city" name="shipping[city]" class="inp step4 input-city" value="">
                <!-- new select -->
                <select class="select inp step4 select-state" id="shipping_region" name="shipping[region]">
                    <option>State</option>
                                            <option value="1">Alabama</option>
                                    </select>
                <input placeholder="ZIP" id="shipping_postcode" name="shipping[postcode]" class="inp step4 input-zip" value="">
                <div class="clear"></div>
            </div>
            <div class="line-large"><input placeholder="Phone Number (xxx-xxx-xxxx)" id="shipping_telephone" name="shipping[telephone]" class="inp step4 input-phone" value=""></div>
            <!--            </div>-->
        </div>

.show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block {
      width: 60%;
      margin: auto; 
      display:block;}
      .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-first {
        width: 100%; }
        .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-first .first-item.small-input {
          margin: 0; }
        .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-first .small-input {
          width: 49.5%;
          float: left;
          height: 15px;
          padding: 2%;
          margin: 0%;
          font-size: 12px; }
      .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-large {
        width: 100%; }
        .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-large .input-phone {
          margin-top: 0;
          margin-bottom: 2%; }
        .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-large input {
          width: 100%;
          float: left;
          height: 15px;
          padding: 2%;
          margin: 2% 0% 0% 0%;
          font-size: 12px; }
      .show-popap-update-shipping-info .wrapper .popap .update-shipping-info-container .action-block .form-block .line-small {
        width: 100%;
        margin-left: 0%; }