Hice un formulario con cinco opciones para pedir libros. Cada opción es un tipo de entrada diferente en sí. El problema es que cada regla no permanece en línea. El formulario de contacto también se mueve a la derecha. Debería parecerse al ejemplo 1. ¿qué salió mal con mi código? por favor vea mi código completo atached.

Gracias

<p><label for="range">Katheryn Stockett - The Help:</label></p>
<input id="range" type="range" min="0" max="15" step="5" list="range-lijst">
    <datalist id="boeken">
        <option value="0" label="0">
        <option value="5">
        <option value="10" label="10">
        <option value="15">
  </datalist>
<small>Bestel 0,5,10 of 15 exemplaren</small>

todas las opciones deben permanecer en línea.

enter image description here

body  {
    background-color:oldlace; 
}

.bg { 
    height: 100%; 
}

 form button#submit 
{
text-align: center;
margin: 4px;
display:inline;
}

input[type=submit] {
  background-color: black;
  color: white;
  padding: 30px 55px;
  box-shadow: 2px 5px #888888;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

.leftFloated{
  float:left;
}

label{
    width: 480px;
    display: inline-block
}

input[type="radio"] {
        margin-left: 10px;
        display: inline
        }
<h1>Boeken bestellen</h1>
      <p>Op deze pagina kunt u snel en gemakkelijk uw favoriete boeken bestellen die in de top 5 staan. U kunt per boek aangeven hoeveel u er van wilt bestellen. Let wel op dat bepaalde boeken beperkt beschikbaar zijn. Dit is aangegeven bij het boek.</p>
      <h2> Bestel hier uw boeken</h2>
      <p><label for="schrijver">Khaled Hosseini - A Thousand Splendid Suns:
      <input id="schrijver" name="aantal boeken" type="number" value="0" min="1" max="10"> <small> max. 10 exemplaren</small>
      </label></p>
       <br>
       <br>
      <p><label for="auteur">Paulo Coelho - The Alchemist:
      <input id="auteur" name="boeken" type="number" value="0" min="1" max="99"><small> max. 99 exemplaren</small>
      </label></p>
       <br>
    
       <p><label for="range">Katheryn Stockett - The Help:</label></p>
      <input id="range" type="range" min="0" max="15" step="5" list="range-lijst">
      <datalist id="boeken">
         <option value="0" label="0">
         <option value="5">
         <option value="10" label="10">
         <option value="15">
      </datalist>
      <small>Bestel 0,5,10 of 15 exemplaren</small>
      <p><label>Miguel de Cervantes - Don Quixote</label>            
      <input type = "radio"
         name = "radSize"
         id = "5"
         value = "1" />
      <label for = "5">5</label>
      <input type = "radio"
         name = "radSize"
         id = "10"
         value = "10" />
      <label for = "10">10</label>
      <input type = "radio"
         name = "radSize"
         id = "20"
         value = "20" />
      <label for = "20">20</label></p>       
      <p>Khaled Hosseini - The Kite Runner</p>
      <select name="aantal boeken">
      <option value="geen">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      </select>
      <div>
         <input type="submit" value="Bestellen">
      </div>
      <h2>Geef hier uw adresgegevens op</h2>
      <div class="container">
         <form action="/action_page.php" method="post">
            <div>
               <label for="naam">Naam:</label>
               <input type="text" id="naam"> 
            </div>
            <div>
               <label for="adres">Adres:</label>
               <input type="text" id="adres">
            </div>
            <div>
               <label for="pc3">Postcode:</label>
               <input id="pc3" pattern="[0-9] {4}\s[A-Z]{2}" title="Een postcode bestaat uit 4 cijfers, 1 spatie en 2 hoofdletters" placeholder="1111 AA">
            </div>
            <div>
               <label for="woonplaats">Woonplaats:</label>
               <input type="text" id="woonplaats">
            </div>
            <div>
               <label for="email">E-mail:</label>
               <input type="text" id="email">
            </div>
            <div>
               <label for="leverdatum">leverdatum:</label>
               <input type="date" id="leverdatum">
            </div>
            <div>
               <label for="bestand">Bestand:</label>
               <input type="file" id="bestand">
            </div>
         </form>
      </div>
   </body>
</html>
0
Sadaf 3 nov. 2019 a las 16:31

2 respuestas

Noté que la estructura html es diferente para cada sección que desea que tenga el mismo estilo. Para mantener las cosas consistentes y eliminar posibles problemas, intente usar la misma estructura para cada bloque. Mirando eso, solucionará ese problema.

La estructura a continuación se utilizó para un elemento:

    <p>
        <label for="auteur">Paulo Coelho - The Alchemist:
            <input id="auteur" name="boeken" type="number" value="0" min="1" max="99">
            <small> max. 99 exemplaren</small>
        </label>
    </p>      

Sin embargo, otra sección se veía diferente así:

    <p>Khaled Hosseini - The Kite Runner</p>
    <select name="aantal boeken">
        <option value="geen">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

La adaptación del segundo bloque de código para reflejar la estructura del segundo bloque soluciona ese problema de diseño, de esta manera:

    <p>
        <label>
            Khaled Hosseini - The Kite Runner</p>
            <select name="aantal boeken">
                <option value="geen">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </label>
    </p>

En cuanto a la ubicación de su botón, tiene dos opciones para colocarlo a la derecha. El primero es colocarlo en una posición absoluta, lo que puede ser complicado, o debe visualizar que hay contenido a la izquierda en su propio contenedor con float: left;, y el botón está en su propio contenedor con float: right;. Esto se vería así:

    <div class="container">
        <div class="float-left">
            <!-- form content here -->
        </div>
        <div class="float-right">
            <!-- form button here -->
        </div>
    </div>

Debería ajustar los anchos en la clase float-left y float-right, y asegúrese de limpiar los flotadores en el contenedor.

0
Bjorn.B 3 nov. 2019 a las 14:16

Su etiqueta tiene un ancho 480px. Impide que sus entradas permanezcan en una línea con su etiqueta. Cambiar sus propiedades como:

label /* If you want to set this style only on range inputs you should change it to label[for=range]*/ {
    float: left;
    clear: none;
    display: block;
    padding: 2px 1em 0 0;
}

input[type=radio],
input.radio {
    float: left;
    clear: none;
    margin: 2px 0 0 2px;
}

Y si desea mantener el formulario a la izquierda y el botón a la derecha, debe envolver formar en un div y botón en otro div y establecer su ancho en porcentaje, y luego envolver ambos divs en otro div como se muestra a continuación.

.content-wrapper:after {
  content: '';
  clear: both;
  display: block;
}

.form-wrapper, .button-wrapper {
  width: 70%;
  float: left;
}
<div class="content-wrapper">
	<div class="form-wrapper">
		  <h2> Bestel hier uw boeken</h2>
		  <p><label for="schrijver">Khaled Hosseini - A Thousand Splendid Suns:
		  <input id="schrijver" name="aantal boeken" type="number" value="0" min="1" max="10"> <small> max. 10 exemplaren</small>
		  </label></p>
		   <br>
		   <br>
		  <p><label for="auteur">Paulo Coelho - The Alchemist:
		  <input id="auteur" name="boeken" type="number" value="0" min="1" max="99"><small> max. 99 exemplaren</small>
		  </label></p>
		   <br>
		   <p><label for="range">Katheryn Stockett - The Help:</label></p>
		  <input id="range" type="range" min="0" max="15" step="5" list="range-lijst">
		  <datalist id="boeken">
			 <option value="0" label="0">
			 <option value="5">
			 <option value="10" label="10">
			 <option value="15">
		  </datalist>
		  <small>Bestel 0,5,10 of 15 exemplaren</small>
		  <p><label>Miguel de Cervantes - Don Quixote</label>
		  <input type = "radio"
			 name = "radSize"
			 id = "5"
			 value = "1" >
		  <label for = "5">5</label>
		  <input type = "radio"
			 name = "radSize"
			 id = "10"
			 value = "10" >
		  <label for = "10">10</label>
		  <input type = "radio"
			 name = "radSize"
			 id = "20"
			 value = "20" >
		  <label for = "20">20</label></p>       
		  <p>Khaled Hosseini - The Kite Runner</p>
		  <select name="aantal boeken">
			  <option value="geen">0</option>
			  <option value="1">1</option>
			  <option value="2">2</option>
			  <option value="3">3</option>
		  </select>
	</div>
	<div class="button-wrapper">
		<input type="submit" value="Bestellen">
	</div>
</div>
0
MasLoo 3 nov. 2019 a las 14:35