Question

如何在不使用javascript的情况下为范围滑块指定最大宽度而不破坏跨度？

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

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

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

我忘了提到我先移动手机，所以如果它不适用于IE9就可以了。后退是滑块不是最大值。 strechted。：）

Answer 1

input[type="range"] {
  width: 90%;
}

如果包装器总是有一个固定的宽度（600px）并且跨度文本可以很小很大，那么取决于你想到的滑块范围，你可能会做这样的事情：跨度总是浮动的在这样的右侧。

HTML：

<div id="wrapper">
  <input type="range" />
  <span>1088888 secs.</span>
  <div class="clear">
</div>

CSS：

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

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

span {
  float: right;
}

.clear {
  clear: both;
}

Answer 2

您可以使用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;
}

http://codepen.io/anon/pen/itzDa

Answer 3

使用：

style="display:inline-block;"

两个元素。这将使它们内联。

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

如果跨度中的文字是静态的，则可以调整范围元素以适应闲暇时的最大宽度。

针对跨浏览器的flexbox（以及任何其他css元素）的来源：http://caniuse.com/

拉伸2个html元素以适合父母的全宽

3 个答案: