拉伸2个html元素，使其完全适合父元素

我的笔：

在不使用javascript的情况下，如何在不破坏跨度的情况下为范围滑块提供最大宽度

我使用IE9+和最新的chrome/FF等

<div id="wrapper">
  <input type="range" />
  <span>10 secs.</span>
</div>

#wrapper{
  width:600px;
  background:pink;
}

10秒。
#包装纸{
宽度：600px；
背景：粉红色；
}

我忘了说我是先做手机的，所以如果它在IE9上不起作用也没关系。退一步是滑块不是最大拉伸：

如果包装器总是有一个固定的宽度（600px），跨度文本可以小也可以大，这取决于您对滑块的范围，您可能会这样做：跨度将始终以这种方式浮动在右侧

HTML:

---

您可以使用flexbox执行以下操作：

#wrapper {
  width: 600px;
  background: pink;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
}
#wrapper input {
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  -ms-box-flex: 2;
  box-flex: 2;
  display: block;
}

使用：

style="display:inline-block;"

在这两个要素上。这将使它们内联

IE 9不支持Flexbox，当处理文档流时，浮动可能会变得不稳定（即使使用建议的清除）

如果跨距中的文本是静态的，则可以在空闲时调整范围元素以适应最大宽度

---

用于跨浏览器的flexbox（和任何其他css元素）上的源代码：

是否应使用display:block；对于span？他希望它不断线，display:block将在滑块下移动span。“这将把它们放在直线上。”我的两个元素以前已经放在直线上了，这不是问题。左元素必须在不包裹右元素的情况下获得最大宽度。你的暗示对这项任务没有帮助，我试过了。啊，我明白了。我道歉。我误解了这个问题。很高兴您找到了答案。您的解决方案在IE9上不起作用，但这不在移动设备上（忘了先提到我使用移动设备），所以对我来说没问题，谢谢：）

#wrapper{
  width:600px;
  background:pink;
}

input[type=range] {
  width: 500px;
  float: left;
}

span {
  float: right;
}

.clear {
  clear: both;
}

#wrapper {
  width: 600px;
  background: pink;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
}
#wrapper input {
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  -ms-box-flex: 2;
  box-flex: 2;
  display: block;
}

style="display:inline-block;"