0

По макету необходимо, разместить несколько блоков в header в одном ряду, как показано на картинке header

Но при использовании dispalay: inline-block кнопка располагается с новой строки

body {
  margin: 0;
  width: 100%;
  height: auto;
}
header {
  background-color: rgb(0, 146, 63);
  box-shadow: 0px 5px 15px 0px rgba(0, 146, 63, 0.5);
  width: 100%;
  height: 41px;
}
.shipping_container {
  width: 50%;
  height: 41px;
  display: flex; 
  align-items: center;
}
.container_1 {
  color:aliceblue;
  font-size: 14px;
  font-family: "Open sans";
  padding-left: 25px;
  align-items: center;
  display: flex;
}
.container_1::before {
  content: '';
  width: 6px;
  border-radius: 50%;
  height: 6px;
  background: white;
}

.button_container {
  display: inline-block;
  height: 41px;
  background-color: blue; /*для наглядности, чтобы видеть, где размещается блок*/
  float:right;
  margin-right: 10%;
}

.login_button {
  line-height: 41px;
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: #03883c;
  box-shadow: 0px 0px 5px 0px rgba(2, 49, 22, 0.1);
}

.login_button:hover {
  background-color: #258b50;
}
<body>
  <header>
      <div class="shipping_container"><span class="container_1">
      Free Shipping on Orders of Rs. 2587 - <span style="color: yellow; font-weight: 
      800">SHIP39</span></span></div>

      <div class="button_container"><a class="login_button" href="#" style="color:aliceblue; 
      text-decoration:none">Login / Register</a></div>
  </header>
</body>

Но получается вот это введите сюда описание изображения

1 ответ 1

1

Просто добавьте для элемента header display: flex и justify-content: space-between и уберите inline-block и float на Вашем button_container. Либо если по каким-то причинам Вам все равно для второго элемента хочется использовать inline-block без флекса на родителе, то shipping_container тоже должен быть inline-block или inline-flex.

body {
  margin: 0;
  width: 100%;
  height: auto;
}
header {
  display: flex;
  justify-content: space-between;
  background-color: rgb(0, 146, 63);
  box-shadow: 0px 5px 15px 0px rgba(0, 146, 63, 0.5);
  width: 100%;
  height: 41px;
}
.shipping_container {
  width: 50%;
  height: 41px;
  display: flex; 
  align-items: center;
}
.container_1 {
  color:aliceblue;
  font-size: 14px;
  font-family: "Open sans";
  padding-left: 25px;
  align-items: center;
  display: flex;
}
.container_1::before {
  content: '';
  width: 6px;
  border-radius: 50%;
  height: 6px;
  background: white;
}

.button_container {
  height: 41px;
  background-color: blue; /*для наглядности, чтобы видеть, где размещается блок*/
  margin-right: 10%;
}

.login_button {
  line-height: 41px;
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: #03883c;
  box-shadow: 0px 0px 5px 0px rgba(2, 49, 22, 0.1);
}

.login_button:hover {
  background-color: #258b50;
}
<body>
  <header>
      <div class="shipping_container"><span class="container_1">
      Free Shipping on Orders of Rs. 2587 - <span style="color: yellow; font-weight: 
      800">SHIP39</span></span></div>

      <div class="button_container"><a class="login_button" href="#" style="color:aliceblue; 
      text-decoration:none">Login / Register</a></div>
  </header>
</body>

Ваш ответ

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

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