防止動態加載選項中的包裝

Question

我有一系列問題/答案的窗體的一部分，其中一些是SELECT下拉列表。這些加載了一個單一的「虛擬」OPTION，然後通過ajax調用來加載實際的選項。

其中之一現在導致一些包裝發生。我在這codepen嘲笑局面：http://codepen.io/esdictor/pen/wBKyzv

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="leftColumn"> 
    <ul> 
    <li class="dataRow clearFix" data-questionid="1"> 
     <div class="dataQuestion">Question:</div> 
     <div class="dataAnswer"> 
     <select class="dataDropDown"> 
      <option value="0">Select ...</option> 
     </select> 
     </div> 
    </li> 
    <li class="dataRow clearFix" data-questionid="2"> 
     <div class="dataQuestion">Hi there:</div> 
     <div class="dataAnswer"> 
     <input class="dataText" type="text" /> 
     </div> 
    </li> 
    </ul> 
</div> 
<input type="button" value="Click Me!" onclick="LoadOptions();" /> 

CSS

.clearFix:after { 
    display: table; 
    clear: both; 
    content: ""; 
} 

.leftColumn { 
    background-color: #BAE6FF; 
    width: 15em; 
    display: block; 
    padding: 0.5em 0; 
    margin-bottom: 1em; 
    overflow: auto; 
} 

ul { 
    margin: 0; 
    padding: 0; 
} 

li { 
    list-style: none; 
    list-style-type: none; 
    height: 2em; 
    clear: left; 
} 

.dataQuestion { 
    float: left; 
    display: block; 
    min-width: 6em; 
    text-align: right; 
    padding-right: 0.5em; 
} 

dataAnswer { 
    float: left; 
    display: block; 
} 

.dataDropDown { 
    display: block; 
    float: left; 
} 

.dataText { 
width: 5em; 
} 

的JavaScript

function LoadOptions() 
{ 
    var $newOption = $('<option value="1">This is a really long answer</option>'); 
    $('.dataRow[data-questionid="1"]').find('.dataAnswer select').append($newOption); 
} 

單擊「Click Me！」按鈕將模擬導致包裝的長項目的加載。

在此先感謝您的幫助，

埃文

Answer 1

正如其他地方討論，您可以使用在li與white-space:nowrap結合的溢出滾動，迫使內聯元素不打破。在這裏，我取代的跨度爲你dataAnswer DIV

function LoadOptions() { 
 
    var $newOption = $('<option value="1">This is a really long answer</option>'); 
 
    $('.dataRow[data-questionid="1"]').find('.dataAnswer select').append($newOption); 
 
}

.clearFix:after { 
 
    display: table; 
 
    clear: both; 
 
    content: ""; 
 
} 
 
.leftColumn { 
 
    background-color: #BAE6FF; 
 
    width: 15em; 
 
    display: block; 
 
    padding: 0.5em 0; 
 
    margin-bottom: 1em; 
 
    overflow: auto; 
 
} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
    list-style: none; 
 
    list-style-type: none; 
 
    height: 2em; 
 
    clear: left; 
 
    white-space: nowrap; 
 
} 
 
.dataQuestion { 
 
    display: inline-block; 
 
    min-width: 4em; 
 
    margin-left: 0.25em; 
 
} 
 
dataAnswer {} .dataDropDown {} .dataText { 
 
    width: 5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="leftColumn"> 
 
    <ul> 
 
    <li class="dataRow clearFix" data-questionid="1"> 
 
     <div class="dataQuestion">Question:</div> 
 
     <span class="dataAnswer"> 
 
     <select class="dataDropDown"> 
 
      <option value="0">Select ...</option> 
 
     </select> 
 
     </span> 
 
    </li> 
 
    <li class="dataRow clearFix" data-questionid="2"> 
 
     <div class="dataQuestion">Hi there:</div> 
 
     <span class="dataAnswer"> 
 
     <input class="dataText" type="text" /> 
 
     </span> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<input type="button" value="Click Me!" onclick="LoadOptions();" />