Alinear inputs css

drakgoku1 · #1 (**permalink**) 21/09/2012, 04:17

Quiero poner los inputs a la derecha, pero el 2 input ya se salta una linea no lo entiendo.

Alguien puede decirme que hago mal ??

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
 
  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
  <title>templates</title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width; initial-scale=1.0" />
 
  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
 
  <link href="prova.css" rel="stylesheet" type="text/css"/>
 
</head>
 
<body>
 
 
<div class="cos">
    <form action="pagina.php" method="post" onClick="javascript">
        <fieldset>
            <legend> Enquesta </legend>
            <div class="mover">
                <ol>
                    <li>
                        <label for="telefon">Telèfon.</label>
                        <input type="tel" id="telefon" placeholder="Introdueix el telèfon"
                        required="required" autofocus/>
                    </li>
                    <li>
                        <label for="adress">Adreça de correu electrònic.</label>
                        <input type="email" id="adress" placeholder="Correu electrònic" 
                        required="required"/>       
                    </li>
                    <li>            
                        <label for="fills">Nombre de fills.</label>
                        <input type="number" id="fills" placeholder="numº fills "
                        required="required"/>       
                    </li>
                    <li>
                        
                        <label for="treballadors">Anys treballats.</label>
                        <input type="number" id="treballadors" placeholder="numº treballadors"
                        required="required"/>
                    </li>
                    <li>
                        <!-- Pot ser perfectament un number ex : 4 anys -->
                        <label for="anysestudi">Anys d'estudis.</label>
                        <input type="number" id="anysestudi" placeholder="Anys d'estudi"
                        required="required"/>
                    </li>
                    <li>
                        
                        <label for="pagina">Pàgina Web del periòdic més llegit.</label>
                        <input type="url" id="pagina" placeholder="Introdueix la pàgina"
                        required="required"/>
                    </li>
                    <li>
                        
                        <label for="color">Color preferit.</label>
                        <input type="text" id="color" placeholder="Color preferit."
                        required="required"/>
                    </li>
                    
                </ol>
            </div>
        </fieldset>
        
        <p>
            <input type="submit" value="Botó d'enviament." class="boton"/>
        </p>
    </form>
</fieldset>
        
        <p>
            <input type="submit" value="Botó d'enviament." class="boton"/>
        </p>
    </form>
</div>
 
<p class="blanc">http://www.colorzilla.com/gradient-editor/</p>
<p class="blanc">http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html</p>
 
</body>
</html>

css

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
body{
    /*http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html*/
/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
 
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #003D59 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #003D59 100%);
/* Opera */ 
background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #003D59 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #003D59));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #003D59 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top left, #FFFFFF 0%, #003D59 100%);
    }
div.cos {
    position: absolute;
 
    left: 25%;  
    top: 180px; 
    width: 50%; 
    height: 790px; 
    border: solid;
    font-family:Verdana, Geneva, sans-serif;
    /*3 schools*/
    box-shadow: 10px 10px 5px #888888;
    border:0.5px solid;
    border-color:white;
    border-radius:25px;
    -moz-border-radius:25px; 
    padding:10px; /* border radius */
    /*3d*/
    
        
/*http://www.colorzilla.com/gradient-editor/*/
 
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
    
    
}
div.mover input {
    height : 18px;
    width : 49.1%;
    float: right;
    
    
    
}
div.mover label {
    width : 50%;
    vertical-align: middle;
    
    
}
div.onemover {
    clear: both;
    text-align: center;
}
footer {
    clear:both;
}
input:hover
{
background-color:#FF9;
} 
 
.boton{
        border:0;
        color: #668428;
        font-size: 20px;
    }
.boton:hover{
    background-color:#CCC;
    border-radius:25px;
    -moz-border-radius:25px; 
    }   
p{
    text-align:center;
    }
.blanc{
    background-color:white;
    color:#F0F;
    }
</style>

drakgoku1 · #2 (**permalink**) 21/09/2012, 04:33

Solucionado.