Question

我有一个表单的一部分，其中包含一系列问题/答案，其中一些是SELECT下拉列表。它们加载了一个“虚拟”OPTION，然后通过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);
}

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

防止在动态加载的OPTION中包装

1 个答案: