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

带CSS的简单表单布局

grid css

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 年前

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>

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…

-2

Sahil Patel 7 年前

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

Mass · 如何在Tailwind CSS v4中创建配置

7 月前

magenta placenta · 将css变量合并为一个变量

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

8 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

8 月前

Luckkks · 过渡色工作不正常

8 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

8 月前