窗體格式化 - 居中窗體並將其字段向左對齊

我正在嘗試將窗體居中，並將其左側的某些字段對齊。任何時候我將它們對齊到左邊 - 它們不在網頁的中心，並且隨時我將表格居中，它們不再與左邊對齊。我有複選框字段。我應該怎麼做呢？ DIV？表？其他？窗體格式化 - 居中窗體並將其字段向左對齊

這裏的代碼的jsfiddle：http://jsfiddle.net/lucyw/FN5BH/13/

謝謝！

2012-01-05 Lucy Weatherford

PLE ase爲我們創建一個[jsFiddle]（http://jsfiddle.net）。 – 2012-01-05 00:31:43

好的 - 更新，檢查出來！ – 2012-01-05 00:51:31

[你在這裏]（http://jsfiddle.net/FN5BH/21/）。基本上，確保你想要居中的元素的寬度小於100％（我宣稱它是400px）。然後使用'margin：0 auto;'來居中它們。 – 2012-01-05 01:12:31

我在下面提供了實現自己期望的最終結果的一個非常標準的方式：

HTML

<div class="container"> 
    <form> 
    <label>foo</label> 
    <input type="text" name="foo"/> 
    <label>fooo</label> 
    <input type="text" name="fooo"/> 
    <label>foooo</label> 
    <input type="text" name="foooo"/> 
    </form> 
</div>

CSS

.container { width:300px; background-color:#222; overflow:hidden; 
       padding:10px; } 
form   { color:#FEFEFE; width:250px; margin:0 auto; 
       background-color:#F62; } 
label, input { float:left; } 
label  { clear:left; display:block; width:60px; }

http://jsfiddle.net/JQttx/3/

來源

2012-01-05 00:35:05 xandercoded

謝謝！看起來很棒 – 2012-01-05 01:53:20

窗體格式化 - 居中窗體並將其字段向左對齊

回答

相關問題