如何将标签及其输入字段对齐到其包含框的每一侧？

Question

This is my problem!

Okay so I want what you can see in the green there, which I obviously managed to do, problem is of course I used fixed sizes, so it can easily get out of order with browser resizing.

I've been working my ass off to find out how I solve this problem, but simple as it seems, no relateable solutions seem to do the trick (I've been reading many answers here).

Any ideas on how to solve this issue, and make the label-text stay on the left, and input fields stay on the right?

The problem starts at the label with the text "Fullt personnavn", here's the HTML/CSS:

 form { font-family:Candara; display: block; } label { display: inline; } .inline { display: inline; } .inline_block { display: inline-block; } button { width: 205px; height: 30px; font-size: 14px; font-weight: 500; } .center { width: 100%; height: 100%; display: block; text-align: center; } .img { width: 24%; height: 6%; } .right1 { width: 45%; float: right; text-align: center; } .right2 { margin-top: 10%; margin-right: 10%; margin-bottom: 10%; } .right3 { border-style: inset; border-color: #52C5FF; border-width: 6px; padding: 20px 20px; background-color: #99EBFF; } .left1a { width: 45%; float: left; text-align: left; } .left2a { margin-top: 10%; margin-right: 10%; margin-bottom: 10%; } .left3a { border-style: inset; border-color: #98d718; border-width: 6px; padding: 20px 20px; background-color: #acf31a; } .left1b { width: 45%; float: left; text-align: left; } .left2b { margin-top: 10%; margin-right: 10%; margin-bottom: 10%; } .left3b { border-style: inset; border-color: #efd849; border-width: 6px; padding: 20px 20px; background-color: #f3f529; } .left_align { margin-left: 10%; } .right_align { margin-right: 10%; } .tittel3 { margin-top: -12px; font-size: 30px; } .sub_tittel3 { margin-top: -20px; font-style: italic; } .bestillingstekst { font-weight: 500; } .question { font-weight: 700; } .kontaktfelt1 { margin-right: 150px; line-height: 21px; text-align:left; } .kontaktfelt2 { margin-top: -105px; text-align:right; } .tidsfelt1 { margin-right: 150px; line-height: 26px; text-align:left; } .tidsfelt2 { margin-top: -100px; line-height: 22px; text-align:right; } .flytting1 { margin-right: 150px; line-height: 23px; text-align:left; } .flytting2 { margin-top: -161px; line-height: 23px; text-align:right; } .psmall { display: inline; font-style: italic; font-size: 13px; font-weight: 600; } .psmall2 { display: block; font-style: italic; font-size: 13px; font-weight: 600; margin-top: 3px; } .radioleft { margin-right: 52px; } .none_aligning { } 

 <form method="POST" id="form1" runat="server" autocomplete="off"> <br /> <div class="center" id="logodiv"> <img class="img" src="/images/logo.jpg"/ alt="logo"/> </div> <div class="right1"> <div class="right2"> <div class="right3"> <p class="tittel3">Bli kontaktet med tilbud på sms!</p> <p class="sub_tittel3">(tilbudet kommer normalt dagen etter)</p> <div class="bestillingstekst"> <p class="question">Hvilke tjenester ønsker du?</p><br /> <label for="fhjelp">Flyttehjelp<input id="fhjelp" type="checkbox" name="tjenester" runat="server"/></label> <label for="fvask">Flyttevask<input id="fvask" type="checkbox" name="tjenester" runat="server"/></label></> <label for="transport">Transport<input id="transport" type="checkbox" name="tjenester" runat="server"/></label></> <p class="question">Hvordan ønsker du å betale?</p><br /> <label for="kontant">Kontant<input id="kontant" type="radio" name="betaling" runat="server"/></label></> <label for="faktura">Faktura<input id="faktura" type="radio" name="betaling" runat="server"/></label></> <p class="question">Er du privatperson eller bedrift?</p><br /> <label for="privat">Privat<input id="privat" type="radio" name="kundetype" runat="server"/></label></> <label for="bedrift">Bedrift<input id="bedrift" type="radio" name="kundetype" runat="server"/></label></> <p class="question">Hvordan kontakter vi deg?</p><br /> <div class="none_aligning"> <label class="left_align" for="personnavn">Fullt personnavn</label> <input class="right_align" id="personnavn" type="text" runat="server"/><br /> <label class="left_align" for="bedriftsnavn">Bedriftsnavn<span class="psmall"> (kun for bedrifter)</span></label> <input class="right_align" id="bedriftsnavn" type="text" runat="server"/><br /> <label class="left_align" for="tlf">Mobilnr.</label> <input class="right_align" id="tlf" type="tel" maxlength="8" runat="server"/><br /> <label class="left_align" for="alt_tlf">Alternativt telefonnr.</label> <input class="right_align" id="alt_tlf" type="tel" maxlength="8" runat="server"/><br /> <label class="left_align" for="epost">Epost</label> <input class="right_align" id="epost" type="email" runat="server"/><br /> </div> <p class="question">Hva er beste dato og tidspunkt for tjenesten(e)?</p><br /> <div class="tidsfelt1"> Flyttehjelp<br/> Utflyttingsvask<br/> Tilflyttingsvask<br/> Transport </div> <div class="tidsfelt2"> <input id="fhjelp_tid" type="datetime-local" value="2020-01-01T10:00:00" runat="server"/><br/> <input id="fvask_tid" type="datetime-local" value="2020-01-01T10:00:00" runat="server"/><br/> <input id="fvask_tid2" type="datetime-local" value="2020-01-01T10:00:00" runat="server"/><br/> <input id="transport_tid" type="datetime-local" value="2020-01-01T10:00:00" runat="server"/> </div> <p class="question">Hvor skal tjenesten(e) starte??</p> <div class="flytting1"> Adresse<br/> Poststed<br/> Postnr.<br/> Etasje<br/> Ca. kvadratmeter <p class="psmall">(trengs bare ved utflyttingsvask)</p><br/> Bygningstype<br/> Heis </div> <div class="flytting2"> <input id="adresse1" type="text" runat="server"/><br/> <input id="poststed1" type="text" runat="server"/><br/> <input id="postnr1" type="text" maxlength="4" runat="server"/><br/> <input id="etasje1" type="tel" maxlength="2" runat="server"/><br/> <input id="kvadratmeter1" type="tel" maxlength="8" runat="server"/><br/> <input id="bygningstype1" type="text" runat="server"/><br/> Ja<input id="heisja1" type="radio" name="heis1" runat="server"/> Nei<input id="heisnei1" type="radio" name="heis1" class="radioleft" runat="server"/> </div> <p class="question">Hvor skal tjenesten(e) avslutte(s)?</p> <p class="psmall2">(ikke fyll inn viss kun utflyttevask)</p> <div class="flytting1"> Adresse<br/> Poststed<br/> Postnr.<br/> Etasje<br/> Ca. kvadratmeter <p class="psmall">(trengs bare ved tilflyttingsvask)</p><br/> Bygningstype<br/> Heis </div> <div class="flytting2"> <input id="adresse2" type="text" runat="server"/><br/> <input id="poststed2" type="text" runat="server"/><br/> <input id="postnr2" type="text" maxlength="4" runat="server"/><br/> <input id="etasje2" type="tel" maxlength="2" runat="server"/><br/> <input id="kvadratmeter2" type="tel" maxlength="8" runat="server"/><br/> <input id="bygningstype2" type="text" runat="server"/><br/> Ja<input id="heisja2" type="radio" name="heis2" runat="server"/> Nei<input id="heisnei2" type="radio" name="heis2" class="radioleft" runat="server"/> </div> <p class="question">Noe mer vi bør vite?</p> <textarea id="textarea1" autofocus="autofocus" rows="6" cols="26" spellcheck="False" name="S1" runat="server">Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br /> <button id="Button2" form="form1" type="submit" onserverclick="sendemail" runat="server">Kontakt meg med et tilbud!</button> </div> </div> </div> </div> <div class="left1a"> <div class="left2a"> <div class="left3a"> <p id="tittel1">Vi tilbyr flyttehjelp, flyttevask og transport!<br /> Vennligst benytt bestillingsskjema til høyre for å få et tilbud raskt og enkelt (bestilling er ikke bindende)!<br /> Ønsker du kontakte oss manuelt, enten for bestilling, informasjon eller kundeservice, kan du også bruke kontakt- og bedriftsinformasjonen under.</p> </div> </div> </div> <div class="left1b"> <div class="left2b"> <div class="left3b"> <p id="tittel2">epost: post@hjelpsommefolk.no<br />tlf: 92 53 48 35<br/>Organisasjonsnr.: 916 043 112<br/> Postadresse: Bragerhagen 19, 3012 Drammen<br/>Kontaktperson: Mantas Tamosiunas</p> </div> </div> </div> 

Answer 1

Try to give lables fixed width, align them to right and display them as inline-block

label { 
 text-align: right; 
 display: inline-block;
 width: 200px; 
}​