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

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。希望这会有所帮助。

＆＃13;

＆＃13;

.inputContainer {
  width: 300px;
  padding: 10px;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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;
    }