1

*, *:before, *:after {
    box-sizing: border-box;
}

body{
    font-family: sans-serif;
    margin: 0;
}

html{
    font-size: 10px;
}

.whaper{
    width: 1280px;
    margin: 0 auto;
    border: 1px solid red;
    
}

.main{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    position: relative;
}

.header{
    height: 80px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    width: 1280px;
}












.search-form {
  display: inline-block;
  /* Это включает позиционирование относительно <form>, */
  /* а не относительно всей страницы */
  position: relative;
}

.search-form-input {
  width: 188px;
  height: 32px;
  line-height: 28px;
  margin: 0;
  padding: 0 38px 0 10px;
  border: 2px solid #d5d5d5;
  border-radius: 0;
  background-color: white;
  box-sizing: border-box;
  font-family: Tahoma, sans-serif;
  font-size: 13px;
}

.search-form-btn {
  /* Позиционирование относительно <form> */
  position: absolute;
  right: 2px; /* 2px - размер border'а поля формы */
  top: 2px;
  width: 28px;
  height: 28px;
  line-height: 28px;

  /* Просто тюнинг внешнего вида */
  color: #666;
  font-weight: bold;      
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  text-align: center;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aditii</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
       <div class="whaper">
        <div class="main">
        <div class="header">
            <div class="logo">
            <h1>Aditii</h1>
            </div>
            <div class="search">
            <form action="#" class="search-form">
                  <input type="search" class="search-form-input" placeholder="Search.." />
                    <button type="submit" class="search-form-btn">
                    <!-- Сюда можно запихнуть любую картинку на свой вкус -->
                       <img src="img/Search%201.png" alt="">
                    </button>
            </form>
            </div>
            <div class="korzina">
            <img src="https://cdn1.savepice.ru/uploads/2017/10/13/8a7753a627c0f71b8149eb94c44dd162-full.png" alt=""> <h2>$300</h2>
            </div>
        </div>
    </div>
    
    
    
    
    
    </div>
</body>
</html>

2
  • Опиши подробнее что тебе нужно))Про какие отступы каких элементов вообще идет речь?
    – A.Ivankov
    13 окт 2017 в 7:30
  • @A.Ivankov Про отступы с лева и с право от границы блока, возле надписи Aditii и корзинки. И что бы эти отступы были одинаковы
    – BraFik
    13 окт 2017 в 7:33

1 ответ 1

2

Я вас правильно понял?)))

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0;
}

html {
  font-size: 10px;
}

.whaper {
  width: 1280px;
  margin: 0 auto;
  border: 1px solid red;
}

.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  position: relative;
}

.header {
  height: 80px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  width: 1280px;
  padding: 0 20px 0 20px;/* вот тут отспуп */
}

.search-form {
  display: inline-block;
  /* Это включает позиционирование относительно <form>, */
  /* а не относительно всей страницы */
  position: relative;
}

.search-form-input {
  width: 188px;
  height: 32px;
  line-height: 28px;
  margin: 0;
  padding: 0 38px 0 10px;
  border: 2px solid #d5d5d5;
  border-radius: 0;
  background-color: white;
  box-sizing: border-box;
  font-family: Tahoma, sans-serif;
  font-size: 13px;
}

.search-form-btn {
  /* Позиционирование относительно <form> */
  position: absolute;
  right: 2px;
  /* 2px - размер border'а поля формы */
  top: 2px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  /* Просто тюнинг внешнего вида */
  color: #666;
  font-weight: bold;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  text-align: center;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Aditii</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="whaper">
    <div class="main">
      <div class="header">
        <div class="logo">
          <h1>Aditii</h1>
        </div>
        <div class="search">
          <form action="#" class="search-form">
            <input type="search" class="search-form-input" placeholder="Search.." />
            <button type="submit" class="search-form-btn">
                    <!-- Сюда можно запихнуть любую картинку на свой вкус -->
                       <img src="img/Search%201.png" alt="">
                    </button>
          </form>
        </div>
        <div class="korzina">
          <img src="https://cdn1.savepice.ru/uploads/2017/10/13/8a7753a627c0f71b8149eb94c44dd162-full.png" alt="">
          <h2>$300</h2>
        </div>
      </div>
    </div>





  </div>
</body>

</html>

7
  • да правильно, а с помощью какого тега вы сделали отступы?
    – BraFik
    13 окт 2017 в 7:35
  • посмотри в коде, я эту строчку которую добавил в твой код прокомментировал
    – Air
    13 окт 2017 в 7:37
  • ага всё понял благодарю
    – BraFik
    13 окт 2017 в 7:38
  • окей уже принял
    – BraFik
    13 окт 2017 в 7:51
  • Стоит добавить пояснение в сам вопрос, комментарии в коде тяжело заметить, когда кода довольно много
    – Grundy
    13 окт 2017 в 12:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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