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

标签 html css

This is my problem!

好吧，我想要你能在那里看到的绿色，我显然设法做到了，问题当然是我使用了固定大小，所以它很容易随着浏览器调整大小而乱序。

我一直在努力寻找解决这个问题的方法，但看起来很简单，似乎没有相关的解决方案可以解决问题(我在这里阅读了很多答案)。

关于如何解决这个问题，让标签文本保持在左侧，输入字段保持在右侧，有什么想法吗？

问题始于带有文本“Fullt personnavn”的标签，这是 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>

最佳答案

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

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

关于html - 如何将标签及其输入字段与其包含框的每一侧对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33861054/

上一篇：JavaScript - setInterval 函数 : interval won't clear

下一篇：javascript - 添加动态输入 - 未正确附加 - 包含图片

相关文章：

css - 如何像在 Twitter 上一样对输入字段进行样式化？

html - 调整窗口大小时对齐方式改变

html - 在 HTML/CSS 中显示类似图表的 png 图像

javascript - 更改点击事件上的 PHP Session 变量

html - 在顶部水平对齐 div 内的元素

jquery - 打开子内容时内容保持悬停状态

jquery - 正确地为 jQuery Mobile 换肤

javascript - 未将数组从 Node.js 获取到 AJAX

html - 如何将 html 单选按钮垂直对齐到它的标签？

javascript - CSS tr 背景不适用于 IE7

©2024 IT工具网  联系我们