ant-design/components/form/demo/inline-form.md

40 lines
1.1 KiB
Markdown
Raw Normal View History

2015-07-07 11:25:16 +08:00
# 行内排列的表单
2015-06-15 20:24:01 +08:00
2015-07-07 23:45:46 +08:00
- order: 1
2015-06-15 20:24:01 +08:00
在**视口宽度大于等于 768px **时,你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
---
````html
<form class="ant-form-inline">
<div class="ant-form-item">
2015-07-07 11:25:16 +08:00
<label for="userName">账户:</label>
<input class="ant-input" type="text" id="userName" placeholder="请输入"/>
2015-06-15 20:24:01 +08:00
</div>
<div class="ant-form-item">
2015-07-07 11:25:16 +08:00
<label for="password">密码:</label>
2015-07-16 11:49:46 +08:00
<input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
2015-06-15 20:24:01 +08:00
</div>
2015-07-16 15:20:06 +08:00
<input type="submit" class="ant-btn ant-btn-primary" value="登 录" />
2015-06-15 20:24:01 +08:00
</form>
2015-07-07 11:25:16 +08:00
<br />
<form class="ant-form-inline">
<div class="ant-form-item">
<input class="ant-input" type="text" id="userName" placeholder="请输入账户名"/>
</div>
<div class="ant-form-item">
2015-07-16 11:49:46 +08:00
<input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
2015-07-07 11:25:16 +08:00
</div>
2015-07-16 14:18:03 +08:00
<div class="ant-checkbox-inline">
2015-07-07 11:25:16 +08:00
<label>
<input type="checkbox"> 记住我
</label>
</div>
2015-07-16 15:20:06 +08:00
<input type="submit" class="ant-btn ant-btn-primary" value="登 录" />
2015-07-07 11:25:16 +08:00
</form>
2015-06-15 20:24:01 +08:00
````