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

时间:2015-11-22 22:32:21

标签: html css

This is my problem!

好的,所以我想要你在绿色中看到的东西,我显然设法做到了,问题当然是我使用固定尺寸,因此浏览器调整大小很容易出错。

我一直在努力找出解决这个问题的方法,但看起来很简单,似乎没有可行的解决方案(我在这里已经阅读了许多答案)。< / p>

有关如何解决此问题的任何想法,并使标签文本保留在左侧,输入字段保留在右侧?

问题始于带有文本&#34; Fullt personnavn&#34;的标签,这里是HTML / CSS:

&#13;
&#13;
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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

尝试给标签固定宽度,将它们对齐并将它们显示为内联块

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