0

Я пытаюсь поместить кнопку и строку поиска посередине, но когда прописываю margin, то контейнер растягивается и выходит за пределы экрана и появляются ползунки. Как бороться с этой проблемой?

1
  • Никак... потому что margin это внешний отступ - он влияет на ширину не самого элемента, а его родителя. В общем, тут проблема подхода к реализации (проблема с осознанием смысла стилей, а не с их поведением).
    – yar85
    Commented 20 апр. в 21:42

2 ответа 2

2

Попробуйте убрать отступы у body и вместо использования margin используйте display:flex;

body {padding: 0; margin:0;}
header {
  /*Внешний вид*/
  position: absolute; 
  background-color: red; 
  width:100%; 
  height:5rem;
  /*Выравнивание*/
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
<header>
  <div class="search">
    <input type="text">
    <button>Добавить объявление</button>
  </div>
</header>

0

Убрать width: 100% и больше не писать бесполезный код.

Ваш ответ

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

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