2

Делаю сайт в процентах и при вставке инпута в див уходит за границу. Никак не пойму в чем дело и как исправить. Хочу, чтобы интуп занимал все свои 10% и при масштабировании оставался на отведенном месте.

<div id="navigation">
<div class="inline-menu"> 
<div class="reg-link"><a href="#">Место под меню</a></div>
</div>

<div class="search"> 
<form action="search.php">
<input type="text" name="search" placeholder="Поиск">
</form> 
</div>
</div>

.CSS
#navigation {
clear:both; 
height:40px; 
margin:auto; 
padding-top:10px; 
border-bottom: 1px solid maroon;
background-color:#F0F0F0;}

.inline-menu {width:90%; float:left;}
.search {width:10%; float:left; }

input {width:100%;}

результат

1 ответ 1

4

По умолчанию браузеры плюсуют к ширине input еще и padding и border. Также по умолчанию есть и margin. Решается просто:

input {
  width: 100%;
  /* Убираем влияние padding и border на конечную ширину input */
  box-sizing: border-box;
  /* Обнуляем margin */
  margin: 0;
}
2
  • 1
    Ещё не забывай про +border
    – Yuri
    16 фев 2017 в 16:45
  • @Yuri box-sizing: border-box; поможет против бордера. 16 фев 2017 в 16:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.