代码之家 › 专栏 › 技术社区 › roeland

带CSS的简单表单布局

grid css

0

roeland · 技术社区 · 7 年前

我有这个HTML代码:

<form>

  <div class="form-group">
    <label>Label1</label>
    <input/>
  </div>

  <div class="form-group">
    <label>Longer label 2</label>
    <textarea>Some text</textarea>
  </div>

</form>

在不设置标签的固定宽度和不更改HTML代码的情况下,如何将其显示在一个漂亮的网格中?

结果应该如下所示:

Label1           Input
Longer label 2   TextArea

3 回复 | 直到 7 年前

1

Paulie_D 7 年前

CSS表

.form-group {
  display: table-row;
  padding-bottom: 1em;
}

label {
  display: table-cell;
  vertical-align: top;
  padding: 0 .5em .5em
}

<form>

  <div class="form-group">
    <label>Label1</label>
    <input/>
  </div>

  <div class="form-group">
    <label>Longer label 2</label>
    <textarea>Some text</textarea>
  </div>

</form>

2

0

Han Che 7 年前

flexbox是你最好的朋友。引导程序网格也基于它们。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<form style="display:flex; flex-wrap: wrap;">
  <div class="form-group">
  </div>
  <div class="form-group">
  </div>
</form>

然后,您可以根据需要设置窗体组的样式,如flex grow flex order…

3

-2

Sahil Patel 7 年前

您应该为此使用引导程序。创建这种布局将非常有帮助。