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

我知道阅读此标题可能会想到与css相同的旧故事，但它不一样。我有一个文本框，我已经给它占位符属性和应用一个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; 
}

我怎样才能摆脱它？

谢谢。

来源

2013-03-11 Khushbu

只是删除保证金为文本框和它的作品。

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

请参阅本DEMO这是HTML控件，如果你不想编辑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-11 06:27:15

你刚删除了margin：14px 94px 0 0;但是这不影响设计。只是我见过 – Freelancer 2013-03-11 06:33:09

Ashwini，thanx的答案，我刚刚发现删除利润率解决了我的问题。 – Khushbu 2013-03-11 06:48:56

@Freelancer：请参阅我的编辑。增加演示。 – 2013-03-11 06:55:41

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

取一个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-11 06:12:09 Freelancer

@自由职业者 - 这是问题出现的地方，我被指示不要使用表格标签。 – Khushbu 2013-03-11 06:17:02

@ Khushbu：使用div标签，就像Shekhar在他的回答中提到的那样，这将是最好的方法 – Freelancer 2013-03-11 06:20:31

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

<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-11 06:17:18

我试过这个，但它没有解决我的问题，我认为问题是顶部和右边距。但是我不能删除它们。那么，任何其他解决方案？ – Khushbu 2013-03-11 06:24:09

@ Khushbu你可以为你的问题创建一个[小提琴]（http://jsfiddle.net/） – 2013-03-11 06:28:46

@ Shekhar-I得到了解决方案。我减少了边距。 – Khushbu 2013-03-11 06:54:10

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

回答

相关问题