0

我知道阅读此标题可能会想到相同的 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;
}

我怎样才能摆脱它？

谢谢你。

4

3 回答 3

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>
于 2013-03-11T06:27:15.283 回答
0

您可以通过在设计应用程序的 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>
于 2013-03-11T06:12:09.920 回答
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>

并设置样式垂直对齐

于 2013-03-11T06:17:18.863 回答