2011-10-17 4 views
0

제 문제는 정렬해야하는 두 개의 드롭 다운 상자가 있다는 것입니다. Firefox에서는 잘 작동합니다. 기본적으로 국가를위한 하나의 양식 상자, 그리고 그 아래에 다른 양식 상자가 있습니다. IE에서는 이러한 상자가 서로 나란히 표시됩니다. 두 번째 양식 상자가 첫 번째 상자 아래에 표시되도록 스타일을 지정하려고합니다.IE CSS 정렬 문제

내 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> 

, "필드", "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;} 

아이디어가 있으십니까?

+0

'float'와 같은 컨텍스트에서'div's에 적용되는 규칙이 있습니까? – jball

+0

전체 CSS (관련성이 있다고 생각하지 않은 내용은 생략했습니다) : #contact_form .label {width : 195px! important; 높이 : 28px; } #contact_form .field {width : auto! important;} .question {float : left; width : 100 %;} .question .label {height : auto! important;} .question .field {margin-top : 0px! important; } .country2 {width : 212px! important;} .us_state_dropdown2 {width : 212px! important;} – ndisdabest

답변

1

clear을 사용하면 선택한면에 요소가 배치되지 않도록 할 수 있습니다. clear을 사용하는 방법을 배우려면 CSS 참조를 읽어보십시오. MDN Reference

+0

"clear : both! important;"라고 입력해도 이것에 관해서, 나는 아직도 같은 행동을 본다. 그것은 제가 시도한 첫 번째 일 중 하나였습니다. – ndisdabest

+0

@ndisdabest, 페이지의 관련 소스를 제공 할 수 있습니까? ASP 서버가없는 사람들이 대답을 테스트하는 것이 더 쉬울 것입니다. http://www.jsfiddle.net에 붙여 넣을 수 있습니다. –

+0

신경 쓰지 마라. 알아낼 수 있었다. 그냥 다른 DIV에 싸서 잘 작동하는 것 같았다. – ndisdabest