如何在同一行设置段落、按钮和文本框？答案

【问题标题】：How to set a paragraph, button and text box in a same row?如何在同一行设置段落、按钮和文本框？
【发布时间】：2021-02-13 09:52:56
【问题描述】：

我一直在尝试将订阅按钮、段落和文本框放在同一行。我正在使用反应故事书。另外，我想将背景颜色添加到我的 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 & 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;

【问题讨论】：

标签： reactjs storybook

【解决方案1】：

p标签是一个占据整个宽度的块级元素。将其display 属性更改为inline

【讨论】：

【解决方案2】：

在 CSS 表中有一个父 div：

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

【讨论】：

【解决方案3】：

<p> 和 <h1> 标签是块级元素，这意味着它们将占据 100% 的宽度并强制换行。

根据您的要求，您可以将 display flex 属性应用于可以有多个列的行 div。

我们要求 col-2 的 align-self 居中，因为 1em 的 margin-top 和 margin-bottom 默认应用于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 & 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>

【讨论】：