把多個文本框和標籤放在同一列css下？

Question

您好！ 是否可以通過CSS編碼將多個文本框和標籤放置在圖片所示的同一列上？如何？

當我做到這一點，它似乎是這樣的： 感謝

Answer 1

試試這個

在你的aspx頁面

<form id="form1" runat="server"> 
<div class="row"> 
    <asp:Label ID="Label1" runat="server" Text="Label" CssClass="label">Dropdown:</asp:Label> 
    <asp:DropDownList ID="DropDownList1" runat="server" CssClass="input"></asp:DropDownList> 
</div> 
<div class="row"> 
    <asp:Label ID="Label2" runat="server" Text="Label" CssClass="label">Textbox 1:</asp:Label> 
    <asp:TextBox ID="TextBox1" runat="server" CssClass="input"></asp:TextBox> 
</div> 
<div class="row"> 
    <asp:Label ID="Label3" runat="server" Text="Label" CssClass="label">Textbox 2:</asp:Label> 
    <asp:TextBox ID="TextBox2" runat="server" CssClass="input"></asp:TextBox> 
</div> 
</form> 

，並在您css文件

.row{ display:block; height:30px;} 
.label{ float:left; width:100px;} 
.input{ float:left; width:100px;} 

Answer 2

我希望這將幫助您..

使用<fieldset>標籤結合<label>。 Step by step explanation。
然後隨意對齊。

或

看看這裏http://jsfiddle.net/Qs4pk/2/

Answer 3

有方法可以做到這荒謬的數字。從簡單的fieldset的CSS到table的（因爲每個人都在嘲笑）。這一切都取決於你如何設計網站/表格。you想要設計網站/表單。看看這兩個例子：

簡單：http://jsfiddle.net/JamesHill/RqdMY/

複雜：http://jsfiddle.net/JamesHill/nhmjD/

Answer 4

<table width="100%"> 
    <tr> 
     <td id="tdControlLabel" runat="server" align="right">   
       <asp:Label ID="_controlLabel" runat="server"></asp:Label>    
     </td> 
     <td style=" color:Red;"> 
      <asp:Label ID="_isMandatory" runat="server" Text="*" Width="2" /> 
     </td> 
     <td align="left"> 
      <asp:TextBox ID="_value" runat="server"></asp:TextBox> 
     </td> 
    </tr> 
    </table> 

我把這個用戶控件，我用它在以往任何時候我想

這裏是背後

public bool isPassword 
     { 
      set 
      { 
       if (value) _value.TextMode = TextBoxMode.Password; 
      } 
     } 
     public string ForeignKey 
     { 
      get { return hdnForeignKey.Value; } 
      set { hdnForeignKey.Value = value; } 
     } 

     public string ControlLabel 
     { 
      get { return _controlLabel.Text; } 
      set { _controlLabel.Text = value; } 
     } 

     public bool IsMandatory 
     { 
      get { return _isMandatory.Visible; } 
      set { _isMandatory.Visible = value; } 
     } 

     public string Value 
     { 
      get { return _value.Text; } 
      set { _value.Text = value; } 
     } 

     public bool IsReadyForInput 
     { 
      get { return _value.Enabled; } 
      set { _value.Enabled = value; } 
     } 

     public string ControlLabelWidth 
     { 
      set { tdControlLabel.Width = value; } 
     } 

     public bool isTextArea 
     { 
      set 
      { 
       if(value) 
       { 
        _value.TextMode = TextBoxMode.MultiLine; 
        _value.Rows = 5; 
       } 
       else 
       { 
        _value.TextMode = TextBoxMode.SingleLine; 
       } 
      } 
     } 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      _value.BackColor = System.Drawing.Color.White; 
     } 

碼這是實現

<uc1:ucTextBox ID="txtxName" ControlLabel="Name" ControlLabelWidth="145" 
            runat="server" IsMandatory="true"></uc1:ucTextBox>