Question

我的问题是我有两个需要对齐的下拉框。在Firefox中，它工作正常。基本上，一个表单框用于国家/地区，然后在其下面，另一个表单框用于状态。在IE中，这些框彼此相邻。我正在尝试设置样式，以便第二个表格框出现在第一个表格框下面。

我的HTML代码（我删除了某些状态，因此更容易阅读）：

<div class="label">*Country:</div>
<div class="field">
  <asp:DropDownList ID="country" CssClass="country2" runat="server"></asp:DropDownList>    
</div>
<div class="label"></div>
<div class="field">
  <asp:DropDownList ID="us_states" runat="server" CssClass="us_state_dropdown2">
    <asp:ListItem>-Select State-</asp:ListItem>
    <asp:ListItem>Alabama</asp:ListItem>
    <asp:ListItem>Alaska</asp:ListItem>
    <asp:ListItem>Arizona</asp:ListItem>
  </asp:DropDownList>
</div>

我的CSS代码“label”，“field”，“country2”和“us_state_dropdown2”：

.label {width: 195px !important; height: 28px; }
.field {width: auto !important;}
.country2 { width:212px !important;}
.us_state_dropdown2 { width:212px !important;}

有什么想法吗？

Answer 1

您可以使用clear来避免元素位于您选择的一侧。阅读CSS参考以了解如何使用clear。 MDN Reference

IE CSS对齐问题

1 个答案: