如何 - 内联表单
学习如何使用 CSS 创建自适应内联表单。
自适应内联表单
调整浏览器窗口大小以查看效果（标签和输入将在较小的屏幕上彼此堆叠，而不是并排显示）
如何创建内联表单
步骤 1）添加 HTML
使用 <form> 元素处理输入。您可以在我们的 PHP 教程中了解更多信息。
示例
<form class="form-inline" action="/action_page.php">
<label for="email">邮箱:</label>
<input type="email" id="email" placeholder="请输入邮箱地址" name="email">
<label for="pwd">密码:</label>
<input type="password" id="pwd" placeholder="请输入密码" name="pswd">
<label>
<input type="checkbox" name="remember"> 记住我
</label>
<button type="submit">提交</button>
</form>
步骤 2) 添加 CSS
示例
/* 样式化表单 - 水平显示项目 */
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/* 为每个标签添加一些边距 */
.form-inline label {
margin: 5px 10px 5px 0;
}
/* 样式化输入字段 */
.form-inline input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
/* 样式化提交按钮 */
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
}
.form-inline button:hover {
background-color: royalblue;
}
/* 添加响应式 - 在宽度小于 800 像素的屏幕上垂直显示表单控件，而不是水平显示 */
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
自己试一试 »
提示: 访问我们的 HTML 表单教程 以了解有关 HTML 表单的更多信息。
提示: 访问我们的 CSS 表单教程 以了解有关如何为表单元素设置样式的更多信息。
