How to align text fields under each other in CSS / HTML

Question

I want to know how to place these text fields under another, so it’s .textboxlocated above and then textbox1below.

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

I would suggest adding:

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

JS Fiddle demo .

display: blockIt makes each of the elements inputcompletely occupy their own "line", while box-sizingforces the browser to include border-widthand paddingwhen calculating the width (so that their widths are the same).

Literature:

• box-sizing.

Answer 2

Adding something like:

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

should be enough [/ p>

http://jsfiddle.net/cFPBZ/

Answer 3

css:

.textbox{display:block;}

class="textbox" .

, .