IE Alignment Issue

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 Ссылка