与 DropDownList 和 TexBox 元素的宽度相同
Same Width to DropDownList and TexBox element
我有一个表格，里面有DropDownList和TexBox元素。我对它们的"宽度"有麻烦。问题是，当我去调整浏览器页面的大小时，即使它们具有相同的设置，它们也会以不同的方式更改宽度。
这些是表格第一行上的两个单元格（一个简单的标签和一个下拉列表）：
<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：为了缩小页面，下拉列表变得比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>
以百分比而不是像素为单位定义"td"宽度。像素将固定"td"的宽度，并且不会在浏览器窗口重新调整大小时重新调整大小。
<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>
谢谢。
你使用的是 Bootstrap 吗？从每个 td 中删除除宽度以外的样式，从下拉列表中删除高度和宽度，并在两个控件中将"表单控件"添加到 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>`
相关文章：
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素，以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素，而不检查每次DOM单击
- 将视口底部滚动到元素底部
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何使用jquery处理php循环通过元素
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 与 DropDownList 和 TexBox 元素的宽度相同
- 插入新元素后更新Yii Dropdownlist
- 如何在MVC5中同步两个DropDownList元素
