一千萬個為什麽

搜索

中心對齊形式,寬度相等的標簽

我有一個非常簡單的網頁表單,由標簽和輸入字段組成,但我似乎無法找到一種方法在頁面中心對齊表單,並且標簽具有相同的寬度,以便它們整齊地顯示在旁邊彼此,一個在另一個之下。我的頁面結構基本上是:

<body>
<div class="form">
<form method="post">
<input type="text" name="msisdn">
<input type="text" name="code">

<input type="image" src="submit-button.gif" alt="Submit">
<input type="checkbox" name="ts_and_cs">

 
</form>
</div>
</body>

通常我會通過在標簽字段上執行 float:left 並在標簽上設置寬度來解決這個問題,但是為此我需要將標簽和輸入字段放在頁面的中心。此外,我無法設置頁面的寬度(或任何包含div),因為頁面將顯示在具有不同屏幕尺寸的移動設備上。

有關如何最好的風格形式的任何建議?謝謝

最佳答案

試試這個CSS:

.form { margin: 0 auto; }
.form label { display: inline-block; width: 150px; } /* Replace the width here with what you want */

轉載註明原文: 中心對齊形式,寬度相等的標簽