Tema: Alinear inputs css
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/09/2012, 04:17
drakgoku1
(Desactivado)
  
Fecha de Ingreso: agosto-2011
Mensajes: 327
Antigüedad: 13 años, 4 meses
Puntos: 3
Alinear inputs css
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
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8" />
  5.  
  6.   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
  7.        Remove this if you use the .htaccess -->
  8.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  9.  
  10.   <title>templates</title>
  11.   <meta name="description" content="" />
  12.   <meta name="viewport" content="width=device-width; initial-scale=1.0" />
  13.  
  14.   <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  15.  
  16.   <link href="prova.css" rel="stylesheet" type="text/css"/>
  17.  
  18. </head>
  19.  
  20. <body>
  21.  
  22.  
  23. <div class="cos">
  24.     <form action="pagina.php" method="post" onClick="javascript">
  25.         <fieldset>
  26.             <legend> Enquesta </legend>
  27.             <div class="mover">
  28.                 <ol>
  29.                     <li>
  30.                         <label for="telefon">Telèfon.</label>
  31.                         <input type="tel" id="telefon" placeholder="Introdueix el telèfon"
  32.                         required="required" autofocus/>
  33.                     </li>
  34.                     <li>
  35.                         <label for="adress">Adreça de correu electrònic.</label>
  36.                         <input type="email" id="adress" placeholder="Correu electrònic" 
  37.                         required="required"/>       
  38.                     </li>
  39.                     <li>            
  40.                         <label for="fills">Nombre de fills.</label>
  41.                         <input type="number" id="fills" placeholder="numº fills "
  42.                         required="required"/>       
  43.                     </li>
  44.                     <li>
  45.                         
  46.                         <label for="treballadors">Anys treballats.</label>
  47.                         <input type="number" id="treballadors" placeholder="numº treballadors"
  48.                         required="required"/>
  49.                     </li>
  50.                     <li>
  51.                         <!-- Pot ser perfectament un number ex : 4 anys -->
  52.                         <label for="anysestudi">Anys d'estudis.</label>
  53.                         <input type="number" id="anysestudi" placeholder="Anys d'estudi"
  54.                         required="required"/>
  55.                     </li>
  56.                     <li>
  57.                         
  58.                         <label for="pagina">Pàgina Web del periòdic més llegit.</label>
  59.                         <input type="url" id="pagina" placeholder="Introdueix la pàgina"
  60.                         required="required"/>
  61.                     </li>
  62.                     <li>
  63.                         
  64.                         <label for="color">Color preferit.</label>
  65.                         <input type="text" id="color" placeholder="Color preferit."
  66.                         required="required"/>
  67.                     </li>
  68.                     
  69.                 </ol>
  70.             </div>
  71.         </fieldset>
  72.         
  73.         <p>
  74.             <input type="submit" value="Botó d'enviament." class="boton"/>
  75.         </p>
  76.     </form>
  77. </fieldset>
  78.         
  79.         <p>
  80.             <input type="submit" value="Botó d'enviament." class="boton"/>
  81.         </p>
  82.     </form>
  83. </div>
  84.  
  85. <p class="blanc">http://www.colorzilla.com/gradient-editor/</p>
  86. <p class="blanc">http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html</p>
  87.  
  88. </body>
  89. </html>
css

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body{
  4.     /*http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html*/
  5. /* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
  6.  
  7. /* IE10 Consumer Preview */ 
  8. background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #003D59 100%);
  9. /* Mozilla Firefox */ 
  10. background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #003D59 100%);
  11. /* Opera */ 
  12. background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #003D59 100%);
  13. /* Webkit (Safari/Chrome 10) */ 
  14. background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #003D59));
  15. /* Webkit (Chrome 11+) */ 
  16. background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #003D59 100%);
  17. /* W3C Markup, IE10 Release Preview */ 
  18. background-image: linear-gradient(to top left, #FFFFFF 0%, #003D59 100%);
  19.     }
  20. div.cos {
  21.     position: absolute;
  22.  
  23.     left: 25%;  
  24.     top: 180px; 
  25.     width: 50%; 
  26.     height: 790px; 
  27.     border: solid;
  28.     font-family:Verdana, Geneva, sans-serif;
  29.     /*3 schools*/
  30.     box-shadow: 10px 10px 5px #888888;
  31.     border:0.5px solid;
  32.     border-color:white;
  33.     border-radius:25px;
  34.     -moz-border-radius:25px; 
  35.     padding:10px; /* border radius */
  36.     /*3d*/
  37.     
  38.         
  39. /*http://www.colorzilla.com/gradient-editor/*/
  40.  
  41. background: #e2e2e2; /* Old browsers */
  42. background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
  43. 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+ */
  44. background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
  45. background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
  46. background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
  47. background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
  48. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
  49.     
  50.     
  51. }
  52. div.mover input {
  53.     height : 18px;
  54.     width : 49.1%;
  55.     float: right;
  56.     
  57.     
  58.     
  59. }
  60. div.mover label {
  61.     width : 50%;
  62.     vertical-align: middle;
  63.     
  64.     
  65. }
  66. div.onemover {
  67.     clear: both;
  68.     text-align: center;
  69. }
  70. footer {
  71.     clear:both;
  72. }
  73. input:hover
  74. {
  75. background-color:#FF9;
  76. } 
  77.  
  78. .boton{
  79.         border:0;
  80.         color: #668428;
  81.         font-size: 20px;
  82.     }
  83. .boton:hover{
  84.     background-color:#CCC;
  85.     border-radius:25px;
  86.     -moz-border-radius:25px; 
  87.     }   
  88. p{
  89.     text-align:center;
  90.     }
  91. .blanc{
  92.     background-color:white;
  93.     color:#F0F;
  94.     }
  95. </style>