如何在CSS/HTML中对齐下方的文本框

Question

我想知道如何将这些文本框放在另一个下方，因此.textbox位于顶部，然后textbox1位于下方。

CSS

.textbox { 
    border: 1px solid #848484; 
    -moz-border-radius-topleft: 30px; 
    -webkit-border-top-left-radius: 30px; 
    border-top-left-radius: 30px; 
    -moz-border-radius-topright: 30px; 
    -webkit-border-top-right-radius: 30px; 
    border-top-right-radius: 30px; 
    border: 1px solid #848484; 
    outline:0; 
    height:25px; 
    width: 275px; 
    padding-left:20px; 
    padding-right:20px; 
} 

.textbox1 { 
    border: 1px dotted #000000; 
    outline:0; 
    height:25px; 
    width: 275px; 
} 

HTML

<input class="textbox" type="text"> 
<input class="textbox1" type="text"> 

Answer 1

添加类似：

input[type=text] { 
    float:left; 
    clear:both; 
} 

应足以

http://jsfiddle.net/cFPBZ/

Answer 2

如何添加这一行的CSS：

.textbox{display:block;} 

同时加入class="textbox"所有文本框。

希望有帮助。

Answer 3

我建议增加：

input { 
    display: block; 
    box-sizing: border-box; 
} 

JS Fiddle demo。

的display: block力各input元件以完全占据其自己的“线”，而box-sizing强制浏览器包括在所述元件的宽度的计算border-width和padding（使得它们的宽度一致）。

参考文献：

• box-sizing。