防止动态加载选项中的包装

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();" />