2017-08-01 41 views
0

我越來越熟悉的vmin vh等 但我需要一個MROE優雅的解決方案,以顯示單詞列表說:響應CSS類型的縮放

apple 
banana 
lemon 
pineapple 

所以列表總是需要在這種情況下,基於最長字的最大寬度「pineapple

僅使用CSS有可能嗎?

+0

不知道我的理解,這樣的事情? https://codepen.io/mcoker/pen/QMEyMW –

回答

1

如果你想有一個列表元素始終以一個頁面的X寬度,同時保持要素邊界流體能夠圍繞其內容擴展(而不是一個固定的寬度),你可以用它結合了inline-block顯示了一個解決方案html元件的font-size上的vw單元。但是,這會相應地縮放整個頁面中的所有內容。

(使全屏和調整頁面大小,看看名單適應)

// All javascript is necessary only for the button to demo list growth. 
 
function addCnt(){ 
 
    var pinapl = document.getElementById('pinapl'); 
 
    pinapl.innerHTML += 'e'; 
 
} 
 

 
var cnt = document.getElementById('cnt'); 
 
cnt.addEventListener('click', addCnt);
html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
html { 
 
    font-family: sans-serif; 
 
    font-size: 6vw; /* setting vw value on HTML makes elements resize to viewport width */ 
 
} 
 
body { 
 
    display: flex; 
 
} 
 
ol { 
 
    display: inline-block; /* making list element inline-block forces content to determine its width */ 
 
    margin: auto; 
 
    background-color: #eee; 
 
    list-style-position: inside; 
 
} 
 
.cnt { 
 
    cursor: pointer; 
 
    padding: 10px; 
 
    background-color: #000; 
 
    color: #eee; 
 
    font-size: 16px; 
 
    position: absolute; 
 
}
<ol> 
 
    <li>apple</li> 
 
    <li>banana</li> 
 
    <li>lemon</li> 
 
    <li id="pinapl">pineapple</li> 
 
</ol> 
 

 
<div id="cnt" class="cnt"> 
 
    click to add content 
 
</div>