在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>

Answer 2

你的HTML和CSS不是很清楚。所以我创造了这个小提琴。

这是你想要的吗？

HTML：

<div class="wrapper">
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="text" placeholder="Write something here">
</div>

CSS：

.wrapper{
  width: 50%;
  position: relative;
}

.wrapper select,
.wrapper input{
  padding: 10px;
  box-sizing: border-box;
}

.wrapper select{
  width: 100%;
}

.wrapper input{
  width: calc(100% - 30px)
}

.wrapper input{
  position: absolute;
  top: 0;
  left: 0
}

http://jsfiddle.net/unsx8L9o/