Question

enter image description here

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

当我这样做时，它看起来像这样： enter image description here 感谢

Answer 1

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

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

或

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

Answer 2

试试这个

在您的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 3

有很多方法可以做到这一点。从简单的fieldset到CSS再到table（就像每个人一样）。这一切都归结为你想要设计网站/表单。看看这两个例子：

简单：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>

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

4 个答案: