避免與動態寬度的DIV中的換行符在IE

Question

我試圖創建一個div，將取決於該分區中的內容有一個動態的寬度。它的工作原理以及在Firefox，但在IE中，我得到換行符，見下面的截圖：

的標記看起來是這樣的：

<div class="filter-dropdown"> 
    <div class="filter-dropdown-options-wrapper"> 
     <ul> 
      <li> 
       <label> 
        <input type="checkbox" checked="checked">(Select All) 
       </label> 
      </li> 
      <li> 
       <label> 
        <input type="checkbox" value="2010-01-31" checked="checked">2010-01-31 
       </label> 
      </li> 
     </ul> 
    </div> 
    <div class="filter-btn-wrapper"> 
     <input type="button" value="Ok" class="btn-filter-ok"> 
     <input type="button" value="Cancel" class="btn-filter-cancel"> 
    </div> 
</div> 

和CSS是這樣的：

 

.filter-wrapper div.filter-dropdown{ 
position:absolute; 
top:-190px; 
right:10px; 
border:1px solid #CFD6DA; 
z-index:10000; 
display:none; 
padding:10px; 
height:170px; 
background-color:#EEF1F2; 
} 

.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper{ 
border:1px solid #CFD6DA; 
padding:5px 10px; 
height:130px; 
overflow-y:auto; 
background-color:#FFFFFF; 
width:100%; 
} 

.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper ul{ 
list-style:none; 
padding-left:0px; 
margin:0px; 
} 

.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper ul li label{ 
display:block; 
} 

.filter-wrapper div.filter-dropdown .filter-btn-wrapper{ 
margin-top:10px; 
text-align:right; 
width:130px; 
} 

.filter-wrapper div.filter-dropdown .filter-btn-wrapper .btn-filter-ok{ 
margin-right:5px; 
width:60px; 
} 
 

所以，我的問題是 - 爲了避免換行符和保持外部div的寬度動態，我需要做些什麼？

Answer 1

首先，對您輸入的右側和箱足夠小，它不希望你的包裹填充/利潤率。它正在包裝，因爲它沒有空間了。如果您設置標籤的背景顏色，您可能會看到它的結束位置。

最後的故障保護，您可以設置white-space: nowrap;，但是這應該是時髦的字體大小問題，這樣不是你首要解決的故障保護，因爲它會引入的水平滾動條等

編輯併發症：此外，您需要從<label...>標籤中獲取<input...>標籤。標籤應該以名稱附在輸入上，而不是由於它們在內部！