将多个文本框和标签放在同一列css下？答案

【问题标题】：Put multiple textboxes and labels under each other on the same column css?将多个文本框和标签放在同一列css下？
【发布时间】：2011-12-01 15:50:23
【问题描述】：

你好！是否可以通过CSS编码将多个文本框和标签放在同一列上，如图所示？以及如何？

当我这样做时，它看起来像这样：谢谢

【问题讨论】：

您在这里真正想知道什么？总而言之不就是表格列中的另一个表格吗？
@KemalCanKara 看看我上传的第二张图片.. 文本框和标签不完美地放在一起
如果对齐是你唯一的问题，你可以在标签和文本框之间放置一个空白并给所有列一个 align="left"

标签： c# asp.net css layout

【解决方案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;}

【讨论】：

【解决方案2】：

我希望这会对你有所帮助..

将<fieldset> 标记与<label> 结合使用。 Step by step explanation.
然后随意对齐。

或

看看这里http://jsfiddle.net/Qs4pk/2/

【讨论】：

【解决方案3】：

有很多荒谬的方法可以做到这一点。从简单的fieldset's 到 CSS 到 table's（每个人都畏缩）。这一切都取决于您想要如何设计网站/表单。看看这两个例子：

简单：http://jsfiddle.net/JamesHill/RqdMY/

复杂：http://jsfiddle.net/JamesHill/nhmjD/

【讨论】：

【解决方案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>

【讨论】：