Question

我有这个html代码：

<input type="checkbox" [checked] = "rowData.FILE_LOAD_ID==120" value={{rowData.FILE_LOAD_ID}} id={{rowData.FILE_LOAD_ID}}>

如何在不为标签设置固定宽度且不更改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>

Answer 1

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>

Answer 2

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 ...

Answer 3

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

使用CSS进行简单的表单布局

3 个答案: