CSS一行兩列表單(Two Column Form)是一種常見的表單布局方式,特別適用于一些簡單的信息收集表單。以下是示例代碼:
<form> <div> <label for="name">Name:</label> <input type="text" id="name" name="name" required> </div> <div> <label for="email">Email:</label> <input type="email" id="email" name="email" required> </div> <input type="submit" value="Submit"> </form> <style> form { display: flex; flex-wrap: wrap; } form div { flex-basis: 50%; padding: 10px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 5px; border-radius: 4px; border: 1px solid #ccc; } input[type="submit"] { background-color: #4CAF50; color: #fff; border: none; cursor: pointer; padding: 10px 20px; border-radius: 4px; } </style>
上面的代碼采用了flex布局,將表單一行分為兩列,每一列占據(jù)了50%的寬度。每個(gè)表單元素都包裹在一個(gè)div中,通過flex-basis屬性控制每個(gè)div的寬度,以達(dá)到兩列布局的效果。
除此之外,代碼中還添加了一些樣式,如label和input元素的樣式以及提交按鈕的樣式,使表單更具美觀性和交互性。