같은 줄에 레이블 및 텍스트 상자 정렬 (왼쪽 및 오른쪽)

Question

ASP.NET 컨트롤이 있습니다. 오른쪽에있는 텍스트 상자와 왼쪽에있는 레이블을 정렬하고 싶습니다.

지금까지이 코드가 있습니다

 <td colspan="2"> 


       <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label> 


     <div style="text-align: right">  
       <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 
     </div> 

     </td> 

텍스트 박스 오른쪽으로 정렬하지만 레이블이 왼쪽 위의 줄에 정렬합니다. 라벨을 왼쪽에, 텍스트 상자를 오른쪽에, 그리고 둘 모두를 같은 줄에 붙이려면 어떻게해야합니까?

감사

Answer 1

당신이

<td colspan="2"> 
    <div style="float:left; width:80px"><asp:Label ID="Label6" runat="server" Text="Label"></asp:Label></div> 

    <div style="float: right; width:100px">  
      <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 
    </div> 

    <div style="clear:both"></div> 

    </td> 

Answer 2

당신은 같은 테이블에 그것을 할 수있는 스타일을 사용할 수 있습니다

<table width="100%"> 
    <tr> 
    <td style="width: 50%">Left Text</td> 
    <td style="width: 50%; text-align: right;">Right Text</td> 
    </tr> 
</table> 

을 또는이 같은 CSS로 작업을 수행 할 수 있습니다

<div style="float: left;"> 
    Left text 
</div> 
<div style="float: right;"> 
    Right text 
</div> 

Answer 3

당신은 d CSS를 사용하여 텍스트 상자를 정렬합니다. 위의 코드가 작동하지 않는 이유는 기본적으로 div의 너비가 컨테이너의 너비와 같기 때문입니다. 따라서 예에서 아래에 푸시됩니다.

다음과 같이 작동합니다. CSS 파일에서

<td colspan="2" class="cell"> 
       <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>   
       <asp:TextBox ID="TextBox3" runat="server" CssClass="righttextbox"></asp:TextBox>  
</td> 

:

.cell 
{ 
text-align:left; 
} 

.righttextbox 
{ 
float:right; 
}