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

时间:2013-03-11 06:03:05

标签: asp.net css textbox alignment label

我知道读这个标题可能会想到与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;
}

我怎样才能摆脱它?

谢谢。

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

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

获取一个HTML表并将文本框放在一列中,并将下一列中的[Manditory *]标记为文本框,如下所示&gt;&gt;

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

答案 2 :(得分:0)

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

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

并设置样式vertical-alignment