如何 - 行內表單
瞭解如何使用 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 表單教程 瞭解更多關於如何設定表單元素樣式的資訊。
