表格的CSS网格系统

Question

我有一个表单，我希望两个input标签在顶部，textarea在底部。我目前有以下

.uploadFile {
    margin: 0 auto;
    width: 50%;
}

.uploadForm {
    padding: 10px;
}

.uploadForm>button {
    float: right;
}

<div class="uploadFile">
  <form action="includes/upload.inc.php" method="POST" class="uploadForm">
    <!-- <input type="file" name="file"> -->
     <input type="text" name="software-name" id="software-name">
     <input type="text" name="filename" placeholder="File name on DigitalOcean Space">
     <textarea name="software-description" id="software-desc" cols="30" rows="10"></textarea>
     <button type="submit">Upload</button>
  </form>
</div>

为了更好地理解我要做什么，这是一个非常糟糕的例证。

Answer 1

这是一个开始。有关文档，请查看：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

.uploadFile {
    margin: 0 auto;
    width: 50%;
}

.uploadForm {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-gap: 10px;
}

.uploadForm>button {
    float: right;
    grid-column-start: 2;
}

textarea, input {
  width: 100%;
}

textarea {
  grid-column-start: span 2
}

<div class="uploadFile">
  <form action="includes/upload.inc.php" method="POST" class="uploadForm">
    <!-- <input type="file" name="file"> -->
     <input type="text" name="software-name" id="software-name">
     <input type="text" name="filename" placeholder="File name on DigitalOcean Space">
     <textarea name="software-description" id="software-desc"></textarea>
     <button type="submit">Upload</button>
  </form>
</div>

Answer 2

如果这是@SuperDJ演示的选项，我将使用css网格。这是使用浮点的替代解决方案。

* {
 box-sizing:border-box;
 }
.uploadFile {
    margin: 0 auto;
    width: 50%;
}

.uploadForm {
    padding: 10px;
}

.uploadForm>button {
    float: right;
    margin:10px 0 0 0;
}
#software-name,
#software-file {
  width:calc(50% - 5px);
  float:left;
  margin:0 0 10px 0;
}
#software-name {
  margin-right:5px;
}
#software-file {
  margin-left:5px;
}
#software-desc {
  width:100%;
}

<div class="uploadFile">
  <form action="includes/upload.inc.php" method="POST" class="uploadForm">
    <!-- <input type="file" name="file"> -->
     <input type="text" name="software-name" id="software-name">
     <input type="text" name="filename"  id="software-file" placeholder="File name on DigitalOcean Space">
     <textarea name="software-description" id="software-desc" cols="30" rows="10"></textarea>
     <button type="submit">Upload</button>
  </form>
</div>

Answer 3

要扩展SuperDJ的答案，您还可以使用Flexbox来实现这种格式。要确定在特定情况下要使用哪一个，您应该阅读the differences between the two，因为它们相似但仍然不同。

---

编辑：这只是一个示例，可能无法在所有浏览器中完美运行。确保实现需要实施的所有后备和供应商前缀。

/* New styles */

.row {
  display: flex;
}

.row-reverse {
  justify-content: flex-end;
}

.cell {
  flex-grow: 1;
  width: 100%;
}

/* Pre-existing styles */

.uploadFile {
  margin: 0 auto;
  width: 50%;
}

.uploadForm {
  padding: 10px;
}

<div class="uploadFile">
  <form action="includes/upload.inc.php" method="POST" class="uploadForm">
    <!-- <input type="file" name="file"> -->
    <div class="row">
      <input type="text" name="software-name" id="software-name" class="cell">
      <input type="text" name="filename" placeholder="File name on DigitalOcean Space" class="cell">
    </div>
    <div class="row">
      <textarea name="software-description" id="software-desc" cols="30" rows="10" class="cell"></textarea>
    </div>
    <div class="row row-reverse">
      <button type="submit">Upload</button>
    </div>
  </form>
</div>

Answer 4

不使用Bootstrap是一件痛苦的事情，但是如果没有它，您可以按以下方法进行操作。

.uploadFile {
    margin: 0 auto;
    width: 50%;
}

.uploadForm {
    padding: 10px;
}

.uploadForm>button {
    float: right;
}
.desc {
    width: 100%;
}
.form-group {
    display: inline-block;
    width: 100%;
    padding: 0 !important;
}

<div class="uploadFile">
  <form action="includes/upload.inc.php" method="POST" class="uploadForm">
    <!-- <input type="file" name="file"> -->
     <div class="form-group">
       <input class="name" type="text" name="software-name" id="software-name">
       <input class="file" type="text" name="filename" placeholder="File name on DigitalOcean Space">
     </div>
     <textarea class="desc" name="software-description" id="software-desc" cols="30" rows="10"></textarea>
     <button class="submit" type="submit">Upload</button>
  </form>
</div>