IE CSS 对齐问题

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>

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

.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 参考