拉伸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元素融入父母全寬

回答

相關問題