如何在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 {
    display: block;
    box-sizing: border-box;
}

JS小提琴演示.

的display: block每个的力input元素完全占据其自己的"线",而box-sizing强制浏览器包括border-width与padding在所述元件的宽度的计算(使得它们的宽度一致).

参考文献:

• box-sizing.