css - 为什么我的表单元素不遵循我的网格布局并且像块元素一样显示

Question

我正在使用网格 css，我的表单元素不符合我的网格约定。

我不知道为什么它会失败，因为我遵循了网格要求并确保表单本身是一个内部有两列的网格，一列用于输入，另一列用于提交按钮。

所以在我看来，它们应该显示为内联元素。

演示在这里

这是我的 react.js 片段：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import style from "./styles.css";

class App extends Component {
  state = {
    name: "",
    email: ""
  };

  onChange = e => {
    console.log("e.target.name: ", e.target.name);
    this.setState({ [e.target.name]: e.target.value });
  };

  sendForm = e => {
    e.preventDefault();
    console.log("form sent: ", this.state.name, this.state.email);
  };

  render() {
    return (
      <div className={style.newsletter_grid}>
        <h2 className={style.newsletter_headline}> newsletter headline</h2>

        <form className={style.newsletter_form} onSubmit={this.sendForm}>
          <div className={style.newsletter_input}>
            <input
              onChange={this.onChange}
              name="name"
              type="text"
              value={this.state.name}
              placeholder="name"
            />
            <input
              onChange={this.onChange}
              name="email"
              type="text"
              value={this.state.email}
              placeholder="email"
            />
          </div>

          <button type="submit" className={style.newsletter_conversion}>
            confirmer
          </button>
        </form>
      </div>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

我的 react.css 片段：

.newsletter_grid {
  display: grid;
  width: 100%;
  grid-template-areas:
    "headline headline"
    "form     form";
}

.newsletter_headline {
  grid-area: headline;
}

.form {
  grid-area: form;
  display: grid;
  grid-template-areas: "newsletter_input           newsletter_conversion";
}

.newsletter_input {
  grid-area: newsletter_input;
}

.newsletter_conversion {
  grid-area: newsletter_conversion;
}

如果有人有任何提示，那就太好了。谢谢。

标签： cssreactjscss-grid