html - 防止在动态加载的 OPTION 中换行

Question

我有一个表单的一部分，其中包含一系列问题/答案，其中一些是 SELECT 下拉列表。这些是用一个“虚拟”选项加载的，然后通过 ajax 调用加载实际选项。

其中之一现在导致发生一些包装。我模拟了这个代码笔中的情况: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);
}

点击“点击我!”按钮将模拟导致换行的长项的加载。

在此先感谢您的帮助，

埃文

Answer 1

正如其他地方所讨论的，您可以在 li 上使用溢出滚动并结合 white-space:nowrap 来强制内联元素不中断。这里我给你换了一个span 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();" />