拉伸2 HTML元素融入父母全宽

我的笔：http://codepen.io/anon/pen/itzDa 拉伸2 HTML元素融入父母全宽

我怎能舍弃范围滑尺不换行的跨度，而无需使用JavaScript的最大宽度？

我用IE9 +和最新的Chrome/FF等

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

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

我忘了提，我做手机第一，所以如果它不能在IE9工作多数民众赞成确定。后退是滑块不是最大值。 strechted。 :)

来源

2013-10-11 Elisabeth

应该使用显示：块;为跨度？ –

他希望没有断线，显示：块会移动滑块下的跨度。 – davey

您可以使用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-11 14:09:40 imjared

你的解决方案不适用于IE9，但这不是在移动（忘记提及我先做手机），所以它对我来说很好，谢谢:) – Elisabeth

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

如果包装总有一个固定的宽度（600像素）和量程文本可以小而大，它是根据什么范围，你记住了滑块，大概瓯可以做这样的事情：跨度将始终以这种方式浮在右侧。

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-11 13:50:08 davey

用途：

style="display:inline-block;"

这两个元素。这会将它们放在内联中。

Flexbox在IE 9中不受支持，并且在处理文档流时浮动可能会变得不可靠（即使按照建议清除）。

如果跨度中的文本是静态的，则可以调整范围元素以适应您休闲时的最大宽度。上Flexbox的跨浏览器

源（和任何其他的CSS元素）：http://caniuse.com/

来源

2013-10-11 14:18:35 Bcbury

“这会让他们内联。”我的两个元素已经排在前面，那不是问题。左侧元素必须获得最大宽度，而不包含正确的元素。你的提示对我尝试这个任务没有帮助。 – Elisabeth

啊，我明白了。我很抱歉。我误解了这个问题。很高兴你找到你的答案。 – Bcbury

拉伸2 HTML元素融入父母全宽

回答

相关问题