CSS表單左文字右表單是一種常見的表單布局方式,它可以提高表單的美觀性和可用性,讓用戶更方便地填寫表單信息。
下面是一個簡單的CSS樣式表,用于實現(xiàn)表單左文字右表單的布局。
label { display: inline-block; width: 100px; text-align: right; margin-right: 10px; } input[type="text"], select { display: inline-block; width: 200px; }
代碼中,label被設(shè)置為inline-block元素,默認(rèn)狀態(tài)下寬度為auto,為了實現(xiàn)左對齊的效果,將其寬度設(shè)置為100px,并且添加了margin-right: 10px的間距。input[type="text"]和select元素也被設(shè)置為inline-block元素,并且共享了同樣的寬度。
下面是一個實際使用CSS表單左文字右表單的例子:
<form> <div> <label for="name">姓名:</label> <input type="text" id="name" name="name"> </div> <div> <label for="email">電子郵件:</label> <input type="text" id="email" name="email"> </div> <div> <label for="city">城市:</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">廣州</option> <option value="shenzhen">深圳</option> </select> </div> </form>
在這個例子中,表單項被包裹在div元素中,每個div元素包含一個label元素和一個input或select元素。CSS樣式表中的代碼被應(yīng)用到每個div元素,從而實現(xiàn)左文字右表單的布局效果。