CSS用于表单的标签和输入字段。还有什么问题？

Question

我正在尝试对齐像How it should be actually这样的表单的输入字段，但我无法完成它。

您可以看到迄今为止我已完成的代码，但仍然无效。

我错过了什么？

label.gegevens { 
 
    display: inline-block; 
 
    float: right; 
 
    clear: right; 
 
    width: 350px; 
 
    text-align: left; 
 
} 
 

 
input.gegevens { 
 
    display: inline-block; 
 
    float: left; 
 
    clear:left; 
 
    text-align:right; 
 
}

<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"> 
 
     <p><label><span class="client-info">Naam: </span><input type="text" name="FirstName" required></label></p> 
 
     <p><label><span class="client-info">Adres: </span><input type="text" name="Adres" required></label></p> 
 
     <p><label><span class="client-info">Postcode: </span><input type="text" name="postcode" pattern="[1-9][0-9]{3}\s?[A-Z]{2}" required></label></p> 
 
     <p><label><span class="client-info">Woonplaats: </span><input type="text" name="Woonplaats" required></label></p> 
 
     <p><label><span class="client-info">Email: </span><input type="text" name="Email"></label></p> 
 
     <p><label><span class="client-info">Genwenste leverdatum: </span><input id="date" type="date" name="Leverdatum"></label></p> 
 
     <p><label><span class="client-info">Bestand: </span><input type="file" name="Bestand"></label></p> 
 
     <input type="submit" value="Bestellen"> 
 
</form> 
 
    

Answer 1

尝试增加周围的形式一个div，然后浮在输入到右侧。下面是我所做的：

<div id="box"> 
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"> 
     <p><label><span class="client-info">Naam: </span><input type="text" name="FirstName" required></label></p> 
     <p><label><span class="client-info">Adres: </span><input type="text" name="Adres" required></label></p> 
     <p><label><span class="client-info">Postcode: </span><input type="text" name="postcode" pattern="[1-9][0-9]{3}\s?[A-Z]{2}" required></label></p> 
     <p><label><span class="client-info">Woonplaats: </span><input type="text" name="Woonplaats" required></label></p> 
     <p><label><span class="client-info">Email: </span><input type="text" name="Email"></label></p> 
     <p><label><span class="client-info">Genwenste leverdatum: </span><input id="date" type="date" name="Leverdatum"></label></p> 
     <p><label><span class="client-info">Bestand: </span><input type="file" name="Bestand"></label></p> 
     <input type="submit" value="Bestellen"> 
</form> 

和这里的CSS

label.gegevens { 
display: inline-block; 
float: left; 
clear: left; 
width: 200px; 
text-align: left; 
} 

input { 
    display: inline-block; 
    float: right; 
    clear:right; 
    text-align:right; 
} 

#box { 
    width:50% 
} 

Link to jsbin

Answer 2

我已经简化了您的一些代码。其中一个问题是label.gegevens而该类没有使用。我将其更改为label.client-info。

我使用flexbox进行线元素的布局和垂直对齐。要了解有关Flexbox的更多信息，请看here。

我不使用浮动来保留文档流中的所有元素。

请注意：使用IE11或更低版本时，flexbox可能会导致问题。

label.client-info { 
 
    width: 180px; 
 
} 
 

 
form p { 
 
    display: flex; 
 
    align-items: center; 
 
}

<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"> 
 
    <p><label class="client-info">Naam:</label><input type="text" name="FirstName" required></p> 
 
    <p><label class="client-info">Adres:</label><input type="text" name="Adres" required></p> 
 
    <p><label class="client-info">Postcode:</label><input type="text" name="postcode" pattern="[1-9][0-9]{3}\s?[A-Z]{2}" required></p> 
 
    <p><label class="client-info">Woonplaats:</label><input type="text" name="Woonplaats" required></p> 
 
    <p><label class="client-info">Email:</label><input type="text" name="Email"></p> 
 
    <p><label class="client-info">Genwenste leverdatum:</label><input id="date" type="date" name="Leverdatum"></p> 
 
    <p><label class="client-info">Bestand:</label><input type="file" name="Bestand"></p> 
 
    <input type="submit" value="Bestellen"> 
 
</form>

Answer 3

JSFiddle

input{ 
    position:absolute; 
    right:50%; 
    left:200px; 
} 

Answer 4

label { 
    display: inline-block; 
    float: right; 
    clear: right; 
    width: 350px; 
    text-align: left; 
} 

input { 
    display: inline-block; 
    float: right; 
    clear:left; 
    text-align:right; 
} 

我注意到你用了两个表单元素和类名，但你不要为这个CSS需要一个类名。如果你需要一个元素的特殊CSS属性，那么你应该使用一个类。

Answer 5

我设法得到我想达到的目标（见代码）。现在我不知道如何让它响应。在较短的视口中，一切都变得混乱。任何提示为此？

html { 
 
    background-image: url(boeken.jpeg); 
 
    background-size: cover; 
 
} 
 

 
span.list { 
 
    color:white; 
 
    background:black; 
 
    padding:4px; 
 
    margin-right:5px; 
 
} 
 

 
input#opt1, input#opt2, input#opt3 { 
 
    width:10px; 
 
} 
 

 
input#karen, input#paula { 
 
    width:20px; 
 
    border: #03A9F4; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    margin-left:5px; 
 
} 
 

 
input#esther { 
 
    width:120px; 
 
    border-top-width: 0px; 
 
    border-bottom-width: 0px; 
 
    margin-left:5px; 
 
    z-index:10; 
 
} 
 

 
select#lijst-fail, input#naam, input#adres, input#postcode, input#woonplaats, input#email, input#date { 
 
    margin-left: 5px; 
 
} 
 

 
small { 
 
    margin-left:10px; 
 
} 
 

 
form input { 
 
    width: 300px; 
 
    border: #03A9F4; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
} 
 

 
.button-verzenden { 
 
    position:absolute; 
 
    top:35%; 
 
    padding-left:80%; 
 
    z-index:-10; 
 
} 
 

 
div#section-1 p {display:flex; align-items: center;} 
 

 
label#karen, label#paula, label#esther, label#suzanne, label#samuel {width:260px;} 
 

 
div#section-2 p {display:flex; align-items: center;} 
 

 
div#section-2 label {width:165px;} 
 

 
input#verzenden { 
 
    background-color: #6d4435; 
 
    font-size: 25px; 
 
    font-weight: bold; 
 
    color: white; 
 
    border: #03A9F4; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    cursor:pointer; 
 
} 
 

 
input[type="file"] { 
 
    border: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" type="text/css" href="boeken_bestellen.css"> 
 
     <title>Bestel hier uw boeken</title> 
 
    </head> 
 
    
 
    <body> 
 
     
 
     <main> 
 
      
 
     <header> 
 
     <h1>Boeken bestellen</h1> 
 
      <p>Op deze pagina kunt u snel de boeken bestellen die in de top 5 staan. Geef per boek aan hoeveel u er van wilt bestellen. Sommige boeken zijn er populair en daardoor kunnen we slechts een beperkt aantal boeken naar u toesturen. Dit is aangegeven bij het boek.</p> 
 
     </header> 
 
     
 
     <div id="section-1"> 
 
     <section> 
 
     
 
     <h2>Bestel hier uw boeken</h2> 
 
     <form id="formulier" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi"> 
 
     <p><span class="list">1</span><label for="karen" id="karen">Karin Slaughter - Mooie meisjes:</label><input id="karen" name="karen" type="number" value="1" min="1" max="10"><small>Max. 10 exemplaren</small></p> 
 
     
 
     <p><span class="list">2</span><label for="paula" id="paula">Paula Hawkins - Het meisje in de trein:</label><input id="paula" type="text" name="paula" pattern="[0-9]{2}"><small>Max. 99 exemplaren</small></p> 
 
     
 
     <p><span class="list">3</span><label for="esther" id="esther">Esther Verhoef - Lieve mama:</label><input id="esther" type="range" min="0" max="15" step="5" list="bereik"><small>Bestel 0, 5, 10 of 15 exemplaren</small> 
 
\t  <datalist id="bereik"> 
 
\t \t <option value="0"> 
 
\t \t <option value="5"> 
 
\t \t <option value="10"> 
 
\t \t <option value="15"> 
 
\t \t </datalist></p> 
 
      
 
     <p><span class="list">4</span><label for="suzanne" id="suzanne">Suzanne Vermeer - Costa del Sol:</label> 
 
     <label for="opt1"><input id="opt1" type="radio" name="mw" value="1">1</label> 
 
     <label for="opt2"><input id="opt2" type="radio" name="mw" value="10">10</label> 
 
     <label for="opt3"><input id="opt3" type="radio" name="mw" value="20">20</label> 
 
     </p> 
 
     
 
     <p><span class="list">5</span><label for="lijst-fail" id="samuel">Samuel Bjork - Ik reis alleen:</label><select id="lijst-fail" name="stijl"> 
 
\t \t <option value=""> 
 
\t \t <option value="1">1</option> 
 
\t \t <option value="2">2</option> 
 
\t \t <option value="3">3</option> 
 
\t \t <option value="4">4</option> 
 
     <option value="5">5</option> 
 
     <option value="6">6</option> 
 
\t \t <option value="7">7</option> 
 
\t \t <option value="8">8</option> 
 
\t \t <option value="9">9</option> 
 
     <option value="10">10</option> 
 
\t  </select></p> 
 
     
 
     </form> 
 
      
 
     </section> 
 
      
 
     </div> 
 
      
 
     <div id="section-2"> 
 
     
 
     <section> 
 
     
 
     <h2>Geef hier uw adres gegevens op</h2> 
 
     <form id="formulier" action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">    
 
     <p><label for="naam">Naam: <abbr title="Vereist">*</abbr></label> 
 
\t  <input id="naam" name="naam" required></p> 
 
     <p><label for="adres">Adres: <abbr title="Vereist">*</abbr></label> 
 
\t  <input id="adres" name="adres" required></p> 
 
     <p><label for="pc3">Postcode:</label> 
 
\t  <input id="postcode" name="postcode" pattern="[0-9]{4}\s[A-Z]{2}" title="Een postcode bestaat uit 4 cijfers, 1 spatie en 2 hoofdletters" placeholder="1234 AB"></p> 
 
     <p><label for="woonplaats">Woonplaats: <abbr title="Vereist">*</abbr></label> 
 
\t  <input id="woonplaats" name="woonplaats" required></p> 
 
     <p><label for="email">Email:</label><input id="email" name="email" type="email" placeholder=iemand@domein.nl pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$"> </p> 
 
     <p><label for="date">Gewenste leverdatum:</label><input id="date" name="date" type="date"></p> 
 
     <p><label for="file">Bestand:</label><input type="file" name="Bestand"></p> 
 
     </form> 
 
     <div class="button-verzenden"> 
 
     <input id="verzenden" form="formulier" type="submit" value="Bestellen">  
 
     </div> 
 
     </section> 
 
     
 
     </div> 
 
      
 
     </main> 
 
     
 
    </body> 
 

 
</html>