如何 - 行内表单
了解如何使用 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;
}
/* 添加响应式设计 - 在宽度小于 800px 的屏幕上垂直显示表单控件而不是水平显示 */
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
自己动手试一试 »
提示：前往我们的 HTML 表单教程 了解更多关于 HTML 表单的信息。
提示：前往我们的 CSS 表单教程 了解更多关于如何设置表单元素样式的信息。
