IE CSS 对齐问题答案

【问题标题】：IE CSS Alignment IssueIE CSS 对齐问题
【发布时间】：2011-12-09 12:22:31
【问题描述】：

我的问题是我需要对齐两个下拉框。在 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;}

有什么想法吗？

【问题讨论】：

在这种情况下是否有任何规则应用于divs，例如float？
完整的 CSS（我省略了我认为不相关的内容）：#contact_form .label {width: 195px !important;高度：28px； } #contact_form .field {width: auto !important;} .question {float: left;宽度：100%；} .question .label {高度：auto !important;} .question .field {margin-top:0px !important; } .country2 { width:212px !important;} .us_state_dropdown2 { width:212px !important;}

标签： css internet-explorer css-float

【解决方案1】：

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

【讨论】：

即使我输入“clear:both !important;”在这一点上，我仍然看到相同的行为。这是我尝试的第一件事。
@ndisdabest，你能提供页面的相关来源吗？没有 ASP 服务器的人更容易测试答案。你可以粘贴到jsfiddle.net。
没关系，我能弄明白。只是将它包裹在另一个 DIV 中，它似乎工作正常。