jquery - 在 chrome 中，如果 div 内元素的宽度是 100% 比上面的第二个推

Question

我在一个 div 中有两个元素。第一个是选择，第二个是输入。我想输入覆盖选择。我在 IE10 和 Firefox 中成功。但是 Html 在 Chrome 中也不是那么理想。 IE 和 Firefox 看起来像:

$(document).ready(function() {
  setclerablecombotext();
})

function setclerablecombotext() {
  var sample = $("#mycombo");
  var wt = sample.width();
  var ht = sample.height();
  $('.clearable').width(wt - 20);
  $('.clearable').css('margin-left', -(wt + 4));
}

.clearable {
  border: none;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color:blue;width:500px;">
  <select id="mycombo" style="width:100%;display:inline;background-color:red;border:none;">
     <option>TEST0</option>
     <option>TEST1</option>
   </select>
  <input value="This is input" class="clearable" />
</div>

如果我将 select 的宽度设置为 99% ，我就可以工作。但这似乎很糟糕。

Answer 1

尽管我一开始就不确定这种方法是否有用，但问题是 Chrome 应用了换行符。在选择和输入上方的 div 上使用 white-space: nowrap。

$(document).ready(function() {
  setclerablecombotext();
})

function setclerablecombotext() {
  var sample = $("#mycombo");
  var wt = sample.width();
  var ht = sample.height();
  $('.clearable').width(wt - 20);
  $('.clearable').css('margin-left', -(wt + 4));
}

.clearable {
  border: none;
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color:blue;width:500px;white-space:nowrap;">
  <select id="mycombo" style="width:100%;display:inline;background-color:red;border:none;">
     <option>TEST0</option>
     <option>TEST1</option>
   </select>
  <input value="This is input" class="clearable" />
</div>