如何在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">

- user2602766

Answer 1

我建议添加以下内容：

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

JS Fiddle演示

display: block强制每个input元素占据自己的完整“行”，而box-sizing强制浏览器在计算元素的宽度时包括border-width和padding(以使它们的宽度匹配)。

参考资料:

• box-sizing.

- David Thomas

Answer 2

添加类似以下内容：

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

应该足够了

http://jsfiddle.net/cFPBZ/

- SubjectCurio

Answer 3

在 CSS 中加入这一行怎么样：

.textbox{display:block;}

在所有文本框中添加class="textbox"。

希望能有所帮助。

- geevee