好的,所以我想要你在绿色中看到的东西,我显然设法做到了,问题当然是我使用固定尺寸,因此浏览器调整大小很容易出错。
我一直在努力找出解决这个问题的方法,但看起来很简单,似乎没有可行的解决方案(我在这里已经阅读了许多答案)。< / p>
有关如何解决此问题的任何想法,并使标签文本保留在左侧,输入字段保留在右侧?
问题始于带有文本&#34; Fullt personnavn&#34;的标签,这里是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
{
}
&#13;
<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>
&#13;
答案 0 :(得分:0)
尝试给标签固定宽度,将它们对齐并将它们显示为内联块
label {
text-align: right;
display: inline-block;
width: 200px;
}