如何正确设置标签和文本框填充？

Question

我不确定自己在做什么错，但是我无法通过标签和文本框获得所需的格式。 我的最终目标是使它看起来像附件中的图片，在这里我可以为标签设置边距/填充/偏移，然后为文本框设置不同的边距/填充/偏移？

 .lblright { float: right; width: 120px; padding-right: 500px; } .lblleft { float: left; padding-left: 50px; } .lblleft2 { float: left; width: 100px; padding-left: 150px; } 

 <asp:Label ID="lblInputAccountHtml" runat="server" Text="Account" class="lblleft"></asp:Label> <input type="text" ID="tbxInputAccount[![enter image description here][1]][1]Html" runat="server" style="width: 125px;" class="lblleft2"> <br> <asp:Label ID="lblInputNameAssignedHtml" runat="server" Text="Name Assigned" class="lblleft"></asp:Label> <input type="text" id="tbxInputNameAssignedHtml" runat="server" style="width: 125px;" class="lblright"> <br> <asp:Label ID="lblInputEmailAddressHtml" runat="server" Text="Email Address" class="lblleft"></asp:Label> <input type="text" id="tbxInputEmailAddressHtml" runat="server" style="width: 125px;" class="lblright"> 

[！[在此处输入图片描述] [2]] [2]

Answer 1

你可以做这样的事情。 我更改了您的代码，并使用了简单的html。 希望这可以帮助。

 .inputContainer { width: 300px; padding: 10px; } .inputContainer label { width: 200px; } .inputContainer input { width: 125px; float: right; } 

 <div class="inputContainer"> <label for="tbxInputAccount" id="lblInputAccountHtml">Account</label> <input type="text" ID="tbxInputAccount" /> </div> <div class="inputContainer"> <label for="tbxInputNameAssignedHtml" id="lblInputNameAssignedHtml" >Name Assigned</label> <input type="text" id="tbxInputNameAssignedHtml"/> </div> <div class="inputContainer"> <label id="lblInputEmailAddressHtml">Email Address</label> <input type="text" id="tbxInputEmailAddressHtml"/> </div> 

Answer 2

我不得不调整@negool的答案，因为它有一个JS错误并且无法正确显示，但是它使我足够接近。 这是有效的

   <div class="inputContainer">
        <asp:Label ID="lblInputAccountHtml" runat="server" Text="Account"></asp:Label>
        <input type="text" ID="tbxInputAccountHtml" /> 
    </div>
    <div class="inputContainer">
        <asp:Label ID="lblInputNameAssignedHtml" runat="server" Text="Name Assigned"></asp:Label>
        <input type="text" id="tbxInputNameAssignedHtml" />
    </div>
    <div class="inputContainer">
        <asp:Label ID="lblInputEmailAddressHtml" runat="server" Text="Email Address asdfasdfasdfasdf"></asp:Label>
        <input type="text" id="tbxInputEmailAddressHtml" />
    </div>


<style type="text/css">

    .inputContainer {
      width: 550px;
      padding: 5px;
      padding-left: 75px;
    }

    .inputContainer label {
      width: 275px;
    }
    .inputContainer input {
      width: 225px;
      float: right;
    }