Question

我正在尝试设置Login Web控件的外观，但我遇到了很多问题。据我所知，我已经正确设置了一切，但由于某种原因，控制仍未正确显示：

a）两个TextBox控件的宽度（ID UserName 和 Password ）应该等于表宽度的70％，但它不是，甚至虽然我已经设置了它们的宽度属性。知道为什么会这样吗？

b）如果包含 lblPassword 和 lblPassword 控件的表格单元格的text-align属性设置为center，则lblPassword和lblPassword溢出。那是为什么？

    <div id="loginbox">
       <asp:Login ID="Login1" runat="server" Width="100%" FailureAction="RedirectToLoginPage"
                    RememberMeSet="false">
                    <LayoutTemplate>
                        <table>
                            <tr>
                                <td style="padding:6px;text-align:center;">
                                    <asp:Label ID="lblUserName" Width="30%"  runat="server" Text="UserName "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="UserName" Width="70%" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding:6px;text-align:center;" >
                                    <asp:Label ID="lblPassword" Width="30%" runat="server" Text="Password "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="Password" Width="70%" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                        </table>
                    </LayoutTemplate>
                </asp:Login>

  #loginbox
  {
      position: absolute;
      top: 16px;
      right: 30px;
      width: 180px;
      height: 80px;
      padding: 2px 2px 2px 2px;    
      font-size: 9px;
      margin:0px;
  }

非常感谢

编辑：

此代码告诉浏览器，跨度应比TD小70％。告诉TD应该是什么宽度的唯一元素是跨度，该跨度想要比TD小70％。因此，TD最终会使用跨度内的文本来判断它应该有多大。

然后这与我的文本框示例的行为不同，因为据我所知，在上面的例子中，span元素（即跨度内的文本）使用其默认宽度进行渲染，而TD将其宽度调整为比span的默认宽度大70％？！但是在TextBox控件的情况下，用于TextBoxes控件的宽度不是它们的默认宽度D，而是它们的宽度也减小了（让我们称之为减少TextBox的宽度W），因此TD不比D大70％，但是相反，TD比W大70％（其中W

现在右边的TD想要成为行宽（TR）的70％，宽度与TABLE的宽度相同。在这种情况下，左侧的TD确定表格的结束大小，因为其内容应占表格宽度的30％。

为什么你说左边的元素决定了桌子的大小？左右TD是否都不能确定表的最终大小？

thanx mate

第二次编辑：

a）我知道这两个细胞应该有相对的尺寸，但我不确定我是否理解55px / 30％* 70％如何给我们正确的结果？如果有的话，不应该是55 * 100％/ 30％（这里55px表示右单元宽度的30％）或55 * 100％/ 70％（这里55px代表左单元宽度的70％）？

b）如果这两个单元格中的span元素的宽度不相等怎么办？然后浏览器如何计算两个单元格的宽度？

c）我假设如果表格指定了宽度，那么两个单元格的宽度不会相互相对，而是相对于表格的宽度？

Thanx mate

第三次编辑：

A）据我了解您的解释，浏览器按以下方式计算两个单元格的宽度：

左侧单元格的宽度设置为某个值的30％，公式55px * 100％/ 30％= 183px *告诉我们左侧单元格的宽度（55px）是183px的30％。
这也意味着右侧单元的宽度等于183px的70％，即183 * 70％/ 100％= 124px。因此，左列和右列的宽度分别为183px的30％和183px的70％。

B）但我认为你在解释中使用的术语 - ＆gt; “左右单元格的宽度应相对于彼此”＆lt; - 表示浏览器应使用以下两种方式之一计算宽度：

a）左侧单元格的宽度应为右侧单元格宽度的30％。由于左侧单元格的宽度为55px，其中55px表示右侧单元格宽度的30％，因此右侧单元格的宽度为55px * 100％/ 30％= 183 px

OR

b）右侧单元格的宽度应为左侧单元格宽度的70％。由于右单元格的宽度为55px，其中55px表示左单元格宽度的70％，因此左单元格的宽度为55px * 100％/ 70％= 78px

设置Web控件的外观时遇到麻烦

1 个答案: