Comment aligner les zones de texte sous chaque autres en CSS/HTML

Je veux savoir comment placer ces zones de texte sous une autre sorte .textbox est en haut, puis textbox1 est ci-dessous.

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">

OriginalL'auteur user2602766 | 2013-11-21

  1. 8

    Je vous suggère d'ajouter:

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

    JS Fiddle démo.

    La display: block forces chaque des input éléments pour occuper totalement de sa propre "ligne", tandis que les box-sizing force le navigateur à inclure la border-width et padding dans le calcul de la largeur de l'élément (de sorte que leurs largeurs de match).

    Références:

    OriginalL'auteur David Thomas

  2. 0

    D'ajouter quelque chose comme:

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

    devrait être suffisant

    http://jsfiddle.net/cFPBZ/

    OriginalL'auteur MLeFevre

  3. 0

    comment à propos de l'ajout d'une ligne de css:

    .textbox{display:block;}

    tout en ajoutant class="textbox" à toutes les zones de texte.

    espère que ça aide.

    OriginalL'auteur geevee