Question

我有一个表，其中有DropDownList和TexBox元素。我对它们的“宽度”有困难.. 问题是，当我去调整浏览器页面的大小时，即使它们具有相同的设置，它们也会以不同的方式改变宽度。

这是表格第一行的两个单元格（一个简单的标签和一个DropDownList）：

    <td class="tabtitle_filtri" style="width: 100px;">
        <asp:Label ID="lblGroup" runat="server" CssClass="marginleft5" Text="<%$ Resources:FORMS, Parking %>"></asp:Label>:
    </td>
    <td style="padding-bottom: 0px; padding-left: 5px; width: 200px;">
      <asp:DropDownList ID="ddlGroup" runat="server" Height="26px" onchange="javascript: return loadTicketsList(null, null, this.value, null, null, null, null, null);"
         TabIndex="2" Width="98%"> 
      </asp:DropDownList>
    </td>

这些是带有TexBox和他的标签的其他两个单元格，放在表格的第二行：

    <td class="tabtitle_filtri" style="width: 100px;">
      <asp:Label ID="lblFrom" runat="server" CssClass="marginleft5" Text="<%$ Resources:FORMS, From %>"></asp:Label>:
    </td>
    <td style="padding-left: 5px; width: 200px;">
      <div style="z-index: 1; width: 92%;">
        <asp:TextBox ID="txtDateStart" runat="server" autocomplete="off" Height="15px" onchange="javascript: return loadTicketsList(this.value, null, null, null, null, null, null, null);"
            Style="z-index: 1" TabIndex="4" Width="100%"></asp:TextBox>
        <cc1:CalendarExtender ID="CalDateStart" runat="server" Enabled="True" TargetControlID="txtDateStart">
        </cc1:CalendarExtender>
      </div>
    </td>

我的问题是，是否有办法控制DropDownList和TexBox的宽度，以确保它们的宽度始终相等。

PS：对于页面的缩小，DropDownList变得比TexBox短

编辑：表格的完整代码：

<table id="tblFilter" style="width: 100%; background-color: White;">
  <tr>
    <td class="tabtitle_filtri" style="width: 100px;">
      <asp:Label ID="lblGroup" runat="server" CssClass="marginleft5" Text="<%$ Resources:FORMS, Parking %>"></asp:Label>:
    </td>
    <td style="padding-bottom: 0px; padding-left: 5px; width: 200px;">
      <div style="z-index: 1; width: 100%;">
        <asp:DropDownList ID="ddlGroup" runat="server" Height="26px" onchange="javascript: return loadTicketsList(null, null, this.value, null, null, null, null, null);"
            TabIndex="2" Width="99%"> 
        </asp:DropDownList> <!-- Width="98%" rimuover il <div> -->
      </div>
    </td>
    <td style="padding-top: 10px; padding-bottom: 0px; padding-left: 5px;">
    </td>
    <td class="tabtitle_filtri" style="width: 100px;">
        <asp:Label ID="lblParkmeter" runat="server" CssClass="marginleft5" Text="<%$ Resources:FORMS, Parkmeter %>"></asp:Label>:
    </td>
    <td style="padding-bottom: 0px; padding-left: 5px; width: 200px;">
        <asp:DropDownList ID="ddlParkmeter" runat="server" Height="26px" onchange="javascript: return loadTicketsList(null, null, null, null, this.value, null, null, null);"
             TabIndex="3" Width="98%">
        </asp:DropDownList>
    </td>
    <td style="padding-top: 10px; padding-bottom: 0px; padding-left: 5px;">
    </td>
    <td class="tabtitle_filtri" style="width: 100px;">
        <asp:Label ID="lblTariff" runat="server" CssClass="marginleft5" 
             Text="<%$ Resources:FORMS, DescRate %>"></asp:Label>:
    </td>
    <td style="padding-bottom: 0px; padding-left: 5px; width: 200px;">
        <asp:DropDownList ID="ddlRate" runat="server" Height="26px" onchange="javascript: return loadTicketsList(null, null, null, null, null, null, this.value, null);"
             TabIndex="3" Width="98%">
        </asp:DropDownList>
    </td>
    <td class="tabtitle_filtri" style="width: 100px; visibility:hidden">
        <asp:Label ID="lblCity" runat="server" CssClass="marginleft5" Text="<%$ Resources:FORMS, City %>"></asp:Label>:
    </td>
    <td style="visibility:hidden; padding-top: 10px; padding-bottom: 0px; padding-left: 5px; width: 200px;">
        <asp:DropDownList ID="ddlCity" runat="server" Height="26px" onchange="javascript: return loadTicketsList(null, null, null, this.value, null, null, null, null);"
             TabIndex="1" Width="98%">
        </asp:DropDownList>
    </td>
  </tr>
  <tr>
    <td class="tabtitle_filtri" style="width: 100px;">
        <asp:Label ID="lblFrom" runat="server" CssClass="marginleft5" Text="<%$ Resources:FORMS, From %>"></asp:Label>:
    </td>
    <td style="padding-left: 5px; width: 200px;">
        <div style="z-index: 1; width: 92%;">
           <asp:TextBox ID="txtDateStart" runat="server" autocomplete="off" Height="15px" onchange="javascript: return loadTicketsList(this.value, null, null, null, null, null, null, null);"
                Style="z-index: 1" TabIndex="4" Width="100%"></asp:TextBox>
           <cc1:CalendarExtender ID="CalDateStart" runat="server" Enabled="True" TargetControlID="txtDateStart">
           </cc1:CalendarExtender>
        </div>
    </td>
    <td style="padding-top: 10px; padding-bottom: 0px; padding-left: 5px;">
    </td>
    <td class="tabtitle_filtri" style="width: 100px;">
        <asp:Label ID="lblTo" runat="server" CssClass="marginleft5" Text="<%$ Resources:FORMS, To %>"></asp:Label>:
    </td>
    <td style="padding-bottom: 0px; padding-left: 5px; width: 200px;">
        <div style="z-index: 1; width: 92%;">
           <asp:TextBox ID="txtDateEnd" runat="server" autocomplete="off" Height="15px" onchange="javascript: return loadTicketsList(null, this.value, null, null, null, null, null, null);"
                Style="z-index: 1" TabIndex="5" Width="100%"></asp:TextBox>
           <cc1:CalendarExtender ID="CalDateEnd" runat="server" Enabled="True" TargetControlID="txtDateEnd">
           </cc1:CalendarExtender>
        </div>
    </td>
    <td style="padding-top: 10px; padding-bottom: 0px; padding-left: 5px;">
    </td>
    <td class="tabtitle_filtri" style="width: 100px;">
        <asp:Label ID="lblType" runat="server" CssClass="marginleft5" 
            Text="<%$ Resources:FORMS, Type %>"></asp:Label>:
    </td>
    <td style="padding-bottom: 0px; padding-left: 5px; width: 200px;">
        <asp:DropDownList Width="98%" ID="ddlLabel" runat="server" Height="26px" onchange="javascript: return loadTicketsList(null, null, null, null, null, this.value, null, null);"
            TabIndex="6">
        </asp:DropDownList>
    </td>
    <td style="padding-top: 10px; padding-bottom: 0px; padding-left: 5px;">
    </td>
    <td class="tabtitle_filtri" style="width: 200px;">
        <asp:Label ID="lblNumCard" runat="server" CssClass="marginleft5" 
             Text="<%$ Resources:FORMS, Tessera %>"></asp:Label>:
    </td>
    <td style="padding-bottom: 0px; padding-left: 5px; width: 200px;">
        <asp:TextBox ID="txtNumCard" runat="server" Height="15px" onkeyup="javascript: return loadTicketsList(null, null, null, null, null, null, null, this.value);"
             TabIndex="7" Width="92%" MaxLength="9"></asp:TextBox>
    </td>
    <td style="padding-top: 10px; padding-bottom: 0px; padding-left: 5px;">
  </tr>
</table>

Answer 1

定义你的＆＃34; td＆＃34;宽度百分比而不是像素。像素将固定你的＆＃34; td＆＃34;当浏览器窗口重新调整大小时，不会重新调整大小。

<td class="tabtitle_filtri" style="width: 100px;">
    <asp:Label ID="lblGroup" runat="server" CssClass="marginleft5" Text="<%$ Resources:FORMS, Parking %>"></asp:Label>:
</td>
<td style="padding-bottom: 0px; padding-left: 5px; width: 100%;">
  <asp:DropDownList ID="ddlGroup" runat="server" Height="26px" onchange="javascript: return loadTicketsList(null, null, this.value, null, null, null, null, null);"
     TabIndex="2" Width="98%"> 
  </asp:DropDownList>
</td>

感谢。

Answer 2

您使用的是Bootstrap吗？从宽度以外的每个td中删除样式，从下拉列表中删除高度和宽度，并在两个控件中将“form-control”添加到CssClass。它应该正确设置宽度 - 见下文：

<td class="tabtitle_filtri" style="width: 100px;">
<asp:Label ID="lblGroup" runat="server" CssClass="marginleft5 form-control" Text="<%$ Resources:FORMS, Parking %>"></asp:Label>:
</td>
<td style="width: 100%;">
<asp:DropDownList ID="ddlGroup" CssClass="form-control" runat="server" onchange="javascript: return loadTicketsList(null, null, this.value, null, null, null, null, null);"
 TabIndex="2"> 
</asp:DropDownList>
</td>`

DropDownList和TexBox元素的宽度相同

2 个答案: