Asp.net 设置web控件的外观时遇到问题_Asp.net_Css_Xhtml_Webforms

Asp.net 设置web控件的外观时遇到问题

asp.net css

Asp.net 设置web控件的外观时遇到问题,asp.net,css,xhtml,webforms,Asp.net,Css,Xhtml,Webforms,我正在尝试设置登录web控件的外观，但遇到了不少问题。据我所知，我已正确设置了所有内容，但由于某些原因，控件仍无法正确显示： a）两个文本框控件（带有IDs UserName和Password）的宽度应该等于表宽度的70%，但事实并非如此，尽管我已经设置了它们的宽度属性。知道为什么吗 b）如果包含lblPassword和lblPassword控件的表单元格的文本对齐属性设置为居中，则lblPassword和lblPassword溢出。为什么呢非常感谢编辑：此代码告诉浏览器跨度

我正在尝试设置登录web控件的外观，但遇到了不少问题。据我所知，我已正确设置了所有内容，但由于某些原因，控件仍无法正确显示：

a）两个文本框控件（带有IDs UserName和Password）的宽度应该等于表宽度的70%，但事实并非如此，尽管我已经设置了它们的宽度属性。知道为什么吗

b）如果包含lblPassword和lblPassword控件的表单元格的文本对齐属性设置为居中，则lblPassword和lblPassword溢出。为什么呢

非常感谢

编辑：

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

这与我的文本框示例不同，因为就我理解你的论点而言，在上述情况下，span元素（即span内的文本）是使用其默认宽度渲染的，而TD将其宽度调整为比span的默认宽度大70%？！但是对于文本框控件，文本框控件使用的宽度不是默认的宽度D，而是它们的宽度也减小了（我们称之为减小的文本框宽度W），因此TD不是比D大70%，而是比W大70%（其中W

现在，右边的TD希望是行宽度（TR）的70%，这与表的宽度相同。在这种情况下，左边的TD决定了表格的结束大小，因为它的内容应该占表格宽度的30%

为什么说左边的元素决定了表格的大小？左TDs和右TDs不都决定表格的最终大小吗

thanx mate

第二次编辑：

a）我知道这两个单元格的大小应该是相对的，但我不知道55px/30%*70%如何给出正确的结果？如果有什么区别的话，公式应该是55*100%/30%（这里55px代表右单元格宽度的30%）还是55*100%/70%（这里55px代表左单元格宽度的70%）

b）如果这两个单元格中的跨度元素没有相等的宽度会怎样？浏览器将如何计算这两个单元格的宽度

c）我假设如果表格有一个指定的宽度，那么两个单元格的宽度就不是相对的，而是相对于表格的宽度

Thanx mate

第三次编辑：

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

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

B）但我认为您在解释中使用的术语-->“左右单元格的宽度应该是相对的”当文本框上的宽度设置为70%时，它告诉浏览器元素应该是其容器宽度的70%——在本例中是TD。您应该做的是将TD的宽度设置为70%，然后将文本框的宽度设置为100%。像这样：

<td style="width: 70%;">
    <asp:TextBox ID="UserName" Width="100%" runat="server"></asp:TextBox>
</td>




表格单元格（）的宽度从何而来？也就是说，如果我没有显式地设置表格单元格的宽度，并且表格单元格中的填充设置为零，那么表格单元格的宽度不应该相等（或者仅仅大一点点）它包含的元素的宽度？我将在上面的答案中添加我的评论，因为这里没有足够的空间。作为对你回复的回应，我已经编辑了我的初始帖子。。。对不起，我一直在拖这个。我为我的话太多而道歉。无论如何，我已经在我的第一篇文章中添加了第二次编辑…以防你还没有放弃我的pea brains+1，来彻底解释浏览器如何决定如何绘制界面。
  #loginbox
  {
      position: absolute;
      top: 16px;
      right: 30px;
      width: 180px;
      height: 80px;
      padding: 2px 2px 2px 2px;    
      font-size: 9px;
      margin:0px;
  }

            OR

<td style="width: 70%;">
    <asp:TextBox ID="UserName" Width="100%" runat="server"></asp:TextBox>
</td>

<html>
<body>
<table border="1">
    <tr>
         <td><span style="width: 30%;">ASDF</span></td>
         <td><span style="width: 70%;">ASDF</span></td>
    </tr>
<table>
</body>
</html>

<html>
<body>
<table border="1">
    <tr>
         <td style="width: 30%;"><span>ASDF</span></td>
         <td style="width: 70%;"><span>ASDF</span></td>
    </tr>
<table>
</body>
</html>

<td><span style="width: 1%;">ASDF</span></td>
<td><span style="width: 70%;">ASDF</span></td>
<td><span style="width: 200%;">ASDF</span></td>

<td><span style="width: 70%;">ASDF</span></td>

<tr>
<td><span style="width: 30%;">ASDF</span></td>
<td><span style="width: 70%;">ASDF</span></td>
</tr>

<tr>
<td style="width: 30%;"><span>ASDF</span></td>
<td style="width: 70%;"><span>ASDF</span></td>
</tr>