仅使用css将标签与文本框正确对齐

Question

我知道读这个标题可能会想到css的旧故事，但它不一样。 我有一个文本框，我给它占位符属性并应用了一个css类。 现在我必须添加一个标签，将其标记为必填字段。 问题是因为CSS，我无法将标签放在文本框的右上角。

这是代码：

<div id="formwrap">
        <div class="formarea">
            <p class="sub_headline">
                User Details</p>

            <asp:TextBox ID="txtFname" class="input" placeholder="First name" runat="server"></asp:TextBox>
            <asp:Label runat="server" Text="*" ForeColor="Red"></asp:Label><br />
            <asp:RequiredFieldValidator runat="server" ErrorMessage="Please Enter First name" ControlToValidate="txtFname" ></asp:RequiredFieldValidator>


</div>
</div>

css代码：

.input
{
    font-family: 'Lato' , sans-serif;
    border: 1px solid #CCCCCC;
    width: 65%;
    height: 20px;
    margin: 14px 94px 0 0;
    font-size: 16px;
    font-weight: lighter;
    padding: 4px;
    color: #E96151;
    float: left;
}

我怎么能摆脱它？

谢谢。

Answer 1

只需删除文本框的边距即可。

.input
{
    font-family: 'Lato' , sans-serif;
    border: 1px solid #CCCCCC;
    width: 65%;
    height: 20px;
    /*margin: 14px 94px 0 0;*/
    font-size: 16px;
    font-weight: lighter;
    padding: 4px;
    color: #E96151;
    float: left;
}

请看这个在HTML控件中的DEMO ，如果你不想编辑css类，那么只需覆盖添加style="margin:0;" 在文本框中。

建议：占位符仅适用于html输入，你可以使用代码下面的代码，它工作得很好。

      <asp:TextBox ID="txtFname" class="input" Text="First Name"
       onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if (this.value == 'First Name') {this.value = '';}" runat="server"></asp:TextBox>

Answer 2

您可以通过在为应用程序设计UI时使用HTML表来解决此问题。

取一个HTML表并将文本框放在一列中，并将下一列中的[Manditory *]标记为文本框，如下所示>>

 <table class="style1">
        <tr>
            <td>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </td>
            <td>
                <asp:Label ID="lblMantitory" runat="server" Text="*"></asp:Label>
            </td>
        </tr>

    </table>

Answer 3

您必须为每个元素创建不同的父容器，然后就可以了。

<div id="formwrap">
    <div class="formarea">
        <p class="sub_headline">
            User Details</p>

        <asp:TextBox ID="txtFname" class="input" placeholder="First name" runat="server"></asp:TextBox>
        <div>
          <asp:Label runat="server" Text="*" ForeColor="Red"></asp:Label><br />
        </div>
        <div>
            <asp:RequiredFieldValidator runat="server" ErrorMessage="Please Enter First name" ControlToValidate="txtFname" ></asp:RequiredFieldValidator>
        </div>
     </div>  
</div>

并设置样式垂直对齐