如何对齐表格，使其看起来像这样？

Question

嘿，所以我试图建立一个使用数据库的电影评论网站（我正在使用PouchDB），我想为自己的管理员设置样式/添加评论页面，以使输入和标签全部对齐某种方式。我一直在调整宽度，内边距和边距，但是我似乎无法使它们对齐。有人可以教我如何按照我希望他们做的方式调整他们吗？

这就是我希望他们看起来的样子：

body {
  margin: 0;
  font-family: georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

.newFilm {
  text-align: left;
  display: inline-block;
  background-color: green;
  width: 80%;
  padding: 20px;
}

label {
  padding: 6px;
  text-align: center;
  background: red;
}

.form {
  display: flex;
  text-align: center;
  flex-direction: column;
}

input {
  margin: 10px;
  width: 40%;
  background-color: yellow;
  padding: 8px;
  border: 2px;
}

<div class="newFilm">
  <h2 id='formTitle'>Create new review</h2>
  <div class="form">
    <form>
      <label for="title">Title:</label><input type="text" id="title">
      <label for="genre">Genre:</label><input type="text" id="genre">
      <label for="image">Image:</label><input type="text" id="image">
      <label for="rating">Rating:</label><input type="number" id="rating">
      <label for="synopsis">Synopsis:</label><input type="text" id="synopsis">
      <label for="trailer">Trailer:</label><input type="text" id="trailer">
      <input type="hidden" id="id">
      <button id="modifyFilmButton">Post review!</button>
    </form>
  </div>
</div>

Answer 1

稍微修改了html以添加一些结构。 我不建议使用此代码，研究引导程序表或类似性质的东西。它将看起来更好，并且是可扩展的解决方案。

.newFilm {
  background-color: red;
  padding: 20px;
  border-radius: 20px;
}

textarea,
input,
label {
  display: block
}

textarea,
input {
  width: 200px;
}

.form {
  width: 100%;
}

.left,
.right {
  width: 49%;
  display: inline-block;
  vertical-align: top;
}

<div class="newFilm">
  <h2 id='formTitle'>Create new review</h2>
  <div class="form">
    <form>
      <div class="left">
        <label for="title">Title:</label>
        <input type="text" id="title">
        <label for="genre">Genre:</label>
        <input type="text" id="genre">
        <label for="image">Image:</label>
        <input type="text" id="image">
        <label for="rating">Rating:</label>
        <input type="number" id="rating">
      </div>
      <div class="right">
        <label for="synopsis">Synopsis:</label>
        <input type="text" id="synopsis">
        <label for="trailer">Trailer:</label>
        <textarea id="trailer" rows="5"></textarea>
        <input type="hidden" id="id">
        <button id="modifyFilmButton">Post review!</button>
      </div>
    </form>
  </div>
</div>

响应式解决方案：

.myForm {
  background-color: red;
  padding: 20px;
  border-radius: 20px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid myForm">
  <div class="row">
    <div class="col-lg"><h1>Create New Review</h1></div>
  </div>
  <form>
    <div class="row">
      <div class="col-md"> <!-- left column -->
        <div class="form-group">
          <label>Title</label>
          <input type="text" class="form-control">
        </div>
        <div class="form-group">
          <label>Genre</label>
          <input type="text" class="form-control">
        </div>
        <div class="form-group">
          <label>Image</label>
          <input type="text" class="form-control">
        </div>
        <div class="form-group">
          <label>Rating</label>
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="col-md"> <!-- right column -->
        <div class="form-group">
          <label>Synopsis</label>
          <input type="text" class="form-control">
        </div>
        <div class="form-group">
          <label>Trailer</label>
          <textarea class="form-control"></textarea>
        </div>
        <input class="btn btn-primary" type="submit" value="Submit" disabled>
      </div>
    </div>
  </form>
</div>

调整左/右列以达到所需的效果。 参见：https://getbootstrap.com/docs/4.1/layout/grid/

Answer 2

您可以使用flex或grid或同时使用二者。我仅以两个示例为例。您也可以只使用网格，并将网格嵌套在网格中。

body {
  margin: 0;
  font-family: georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

.newFilm {
  background-color: green;
  max-width: 100%;
  padding: 10%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
}
#formTitle {
  grid-column: 1/3;
}
#modifyFilmButton {
  grid-column: 2/3;
  width: 50%;
  justify-self: end;
}
.left {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}
.right {
  display: flex;
  flex-direction: column;
  text-align: left;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>temp</title>
    <link rel="stylesheet" type="text/css" href="temp.css" />
  </head>

  <body>
    <div class="newFilm">
      <h2 id="formTitle">Create new review</h2>

      <div class="left">
        <label for="title">Title:</label><input type="text" id="title" />
        <label for="image">Image:</label><input type="text" id="image" />
        <label for="trailer">Trailer:</label><input type="text" id="trailer" /> <input type="hidden" id="id" />
        <label for="rating">Rating:</label><input type="number" id="rating" />
      </div>

      <div class="right">
        <label for="genre">Genre:</label><input type="text" id="genre" />
        <label for="synopsis">Synopsis:</label><input type="text" id="synopsis" />
      </div>
      
      <button id="modifyFilmButton">Post review!</button>

      </div>

    <script src="temp.js"></script>
  </body>
</html>

Answer 3

有几种方法可以做到这一点。

我最好的选择是拥有一个大div并容纳两个较小的divs。 然后给那两个分别占50％的divs width-我为此使用了grid。 之后，您要确保label和input占用了全部width的容器。 这样，您将实现大部分想要的东西。另外，对于提要，您应该使用textarea而不是input。

这是我在codepen.上的示例

Answer 4

这就是我所做的

body {
  margin: 0;
  font-family: georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

.newFilm {
  text-align: left;
  display: inline-block;
  background-color: green;
  width: 80%;
  padding: 20px;
}

label {
  padding: 6px;
  color: #fff;
  display: block;
  text-align: left;
}

.form {
  display: flex;
  text-align: center;
  flex-direction: column;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.col {
  padding: 20px;
}

input,
textarea {
  width: 100%;
  display: block;
  background-color: yellow;
  padding: 8px;
  border: 2px;
}

#modifyFilmButton {
  float: right;
}

<div class="newFilm">
  <h2 id='formTitle'>Create new review</h2>
  <div class="form">
    <form>
      <div class="row">
        <div class="col">
          <label for="title">Title:</label><input type="text" id="title">
          <label for="image">Image:</label><input type="text" id="image">
          <label for="trailer">Trailer:</label><input type="text" id="trailer">
          <label for="rating">Rating:</label><input type="number" id="rating">
        </div>
        <div class="col">
          <label for="genre">Genre:</label><input type="text" id="genre">
          <label for="synopsis">Synopsis:</label>
          <textarea rows="9" id="synopsis"></textarea>
        </div>
      </div>
      <input type="hidden" id="id">
      <button id="modifyFilmButton">Post review!</button>
    </form>
  </div>
</div>