使用％identifier

Question

我正在尝试设计一个包含标签和文本框的简单UI，但我的控件超出了父控件的宽度。这是表格的html。

<asp:Table ID="Table3" runat="server">
    <asp:TableHeaderRow Font-Size="X-Small" Font-Bold="true">
        <asp:TableHeaderCell CssClass="CellWidth10">
        </asp:TableHeaderCell>
        <asp:TableHeaderCell CssClass="CellWidth20">
        </asp:TableHeaderCell>
        <asp:TableHeaderCell CssClass="CellWidth10">
        </asp:TableHeaderCell>
        <asp:TableHeaderCell CssClass="CellWidth20">
        </asp:TableHeaderCell>
        <asp:TableHeaderCell CssClass="CellWidth10">
        </asp:TableHeaderCell>
        <asp:TableHeaderCell CssClass="CellWidth20">
        </asp:TableHeaderCell>
    </asp:TableHeaderRow>
    <asp:TableRow>
        <asp:TableCell >
            <asp:Label ID="TextBox7" Runat="Server" Text="User ID"/>
        </asp:TableCell>
        <asp:TableCell >
            <asp:TextBox ID="TextBox1" Runat="Server"/>
        </asp:TableCell>
        <asp:TableCell>
            <asp:Label ID="Label2" Runat="Server" Text="UserName"/>
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="TextBox2" Runat="Server"/>
        </asp:TableCell>
        <asp:TableCell>
            <asp:Label ID="Label3" Runat="Server" Text="Badge No"/>
        </asp:TableCell>
         <asp:TableCell>
             <asp:TextBox ID="TextBox3" Runat="server" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table> 

这里是上面html的输出

包含帐户ID /名称/否的文本框的第一行是正常的但是下面的表格控件是在cssClass为

的父容器之外

.content-wrapper {
margin: 0 auto;
max-width: 960px;

}

.CellWidth10 { width: 10%; }
.CellWidth20 { width: 20%; }

但是如果我向第一个表添加更多控件，它的控件也会移出父容器。

那么我如何正确地控制控件，就像我们在WPF中使用表格然后使用百分比定义宽度/高度一样？

Answer 1

您可以这样指定

<asp:TableHeaderCell CssClass="CellWidth10" Width="10%">
<asp:TableHeaderCell CssClass="CellWidth20" Width="20%">