Блог

Я пытался разместить кнопку подписки, абзац и текстовое поле в одной строке. Я использую React Storybook. Кроме того, я хочу добавить цвета фона в ту же строку внутри моего файла Scss. Вот изображение, прикрепленное для справки.

 import React from "react";
import "./styles.scss";

function Footer() {
  return (
    <div className="main-footer">
      <div className="container">
        <div className="row">
          {/*Column 1 */}
          <div className="col">
            <h1>News Letter</h1>
            <p>Freebies,news amp; promos directly in your inbox.</p>
          </div>
          {/*Column 2 */}
          <div className="col">
            <label className="subscribe">
              <input
                type="text"
                value=" enter your email"
                placeholder="enter your email"
              />
            </label>
            <input type="button" value="Subscribe" />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Footer;
 

p тег — это элемент уровня блока, который занимает всю ширину. Измените его display свойство на inline

Затем создайте родительский div на листе CSS:

 div{
    display: flex;
    flex-direction: row;
} 

<p> а <h1> теги — это элемент уровня блока, что означает, что они будут занимать 100% ширины и будут вызывать разрыв строки.

В соответствии с вашими требованиями вы можете применить свойство display flex к строке div, которая может иметь несколько столбцов для этого div.

Мы требуем выравнивания col-2 по центру, потому что margin-top и margin-bottom 1em применяются к p тегу по умолчанию.

Чтобы избежать такой проблемы, мы можем применить margin: 0; наш универсальный выбор, который будет применяться к каждому элементу.

 .row {
  display: flex;
}

.col-2 { 
  align-self: center;
} 

 <div class="main-footer">
  <div class="container">
    <div class="row">
      <div class="col-1">
        <h1>News Letter</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-1">
        <p>Freebies,news amp; promos directly in your inbox.</p>
      </div>

      <div class="col-2">
        <label class="subscribe">
              <input
                type="text"
                value=" enter your email"
                placeholder="enter your email"
              />
            </label>
        <input type="button" value="Subscribe" />
      </div>
    </div>
  </div>
</div>