J'ai fait un formulaire avec cinq options pour commander des livres. Chaque option est elle-même un type d'entrée différent. Le problème est que chaque règle ne reste pas en ligne. Le formulaire de contact se déplace également vers la droite. Cela devrait ressembler à l'exemple 1. qu'est-ce qui ne va pas avec mon code? s'il vous plaît voir mon code complet ci-joint.

Merci

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

toutes les options doivent rester en ligne.

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 à 16:31

2 réponses

J'ai remarqué que la structure html est différente pour chaque section que vous souhaitez avoir le même style. Pour garder les choses cohérentes et éliminer les problèmes potentiels, essayez d'utiliser la même structure pour chaque bloc. En regardant cela, cela résoudra ce problème.

La structure ci-dessous a été utilisée pour un élément:

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

pourtant, une autre section ressemblait à ceci:

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

L'adaptation du deuxième bloc de code pour refléter la structure du deuxième bloc corrige ce problème de mise en page, comme suit:

    <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 termes de placement de votre bouton, vous avez deux options pour le placer à droite. La première consiste à le positionner de manière absolue, ce qui peut devenir délicat, ou vous devez visualiser qu'il y a du contenu à gauche dans son propre conteneur avec float: left;, et le bouton est dans son propre conteneur avec float: right;. Cela ressemblerait à ceci:

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

Vous devez alors définir le besoin d'ajuster les largeurs sur les classes float-left et float-right, et assurez-vous d'effacer les flottants sur le conteneur.

0
Bjorn.B 3 nov. 2019 à 14:16

Votre étiquette a une largeur de 480px. Il empêche vos entrées de rester sur une seule ligne avec leur étiquette. Modifiez leurs propriétés comme:

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;
}

Et si vous voulez garder le formulaire à gauche et le bouton à droite, vous devriez emballage former dans une div et bouton dans une autre div et définir leur largeur en pourcentage, puis encapsuler les deux div dans une autre div comme ci-dessous.

.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 à 14:35