0

我的笔：http ://codepen.io/anon/pen/itzDa

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

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

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

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

我忘了提到我先做移动，所以如果它在 IE9 上不起作用，那也没关系。回退是滑块不是最大的。伸展。:)

4

3 回答 3

0 
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;
}
于 2013-10-11T13:50:08.393 回答
0

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

于 2013-10-11T14:09:40.007 回答
0

利用：

style="display:inline-block;"

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

IE 9 不支持 Flexbox，并且在处理文档流时浮动可能会变得不稳定。（即使按照建议使用 clear）。

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

用于跨浏览器的 flexbox（和任何其他 css 元素）的源代码：http: //caniuse.com/

于 2013-10-11T14:18:35.153 回答