垂直元素列表，其中每行縮小其寬度以匹配內部內容

我想要創建一個垂直列表，其中每行縮小其寬度以完全包含其內部內容（與默認的div行爲將其寬度擴展爲填充容器）。垂直元素列表，其中每行縮小其寬度以匹配內部內容

我想這樣做只有一個每行的HTML元素（沒有額外的包裝divs）。

以下代碼完全符合我的要求，但它在Safari中不起作用（bug？）。

.container { 
 
    margin: 10px; 
 
    border: 2px solid #999; 
 
    padding: 5px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 300px 
 
} 
 
.row-item { 
 
    padding: 5px; 
 
    margin: 5px; 
 
    border: 1px solid green; 
 
    /* this will shrink the width to the inner content 
 
     in Chrome and Firefox, but not in Safari */ 
 
    margin-right: auto; 
 
}

<div class='container'> 
 
    <div class='row-item'>Item #1</div> 
 
    <div class='row-item'>Another Item...</div> 
 
    <div class='row-item'>Item No. 3</div> 
 
</div>

下面是一個與上面的代碼codepen：http://codepen.io/anon/pen/woKYqx

我知道它是微不足道的由內部元件上增加一個包裝的div，然後使用display: inline-block來解決這個問題（或其他幾個類似的解決方案）。

但是，它似乎應該有可能解決這個問題，而無需添加額外的HTML元素。這是一個相當簡單的佈局。

是否有跨瀏覽器的方式來爲每行做單個HTML元素？

來源

2016-11-09 Daniel Waltrip

您正在使用margin-right: auto將元素一直推到左側，這也迫使項目取其內容的寬度。

這是一個很好的方法，但正如你所說的，它在Safari中失敗。

一個簡單的辦法是在柔性物品使用align-self: flex-start：

.row-item { 
    padding: 5px; 
    margin: 5px; 
    border: 1px solid green; 
    align-self: flex-start; /* NEW */ 
    /* margin-right: auto; (can be kept or removed) */ 
}

OR，剛撓性容器上使用align-items: flex-start。

.container { 
    margin: 10px; 
    border: 2px solid #999; 
    padding: 5px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; /* NEW */ 
    width: 300px 
}

來源

2016-11-09 23:31:45

輝煌！謝謝。 –

-1

當您使用display：flex時，您還應該使用供應商前綴。也支持舊版本的瀏覽器的疑問時請查看您caniuse.com

.container { 
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -webkit-flex; /* NEW - Chrome */ 
display: -ms-flexbox; /* TWEENER - IE 10 */ 
display: flex; 
/* ETC */ 
}

注：caniuse.com已經寫錯誤報告被上關於Flexbox在Safari兒童的高度。

來源

2016-11-09 23:33:47

您可以刪除所有柔性的東西，對家長使用float:left和clear:left的孩子，overflow-x: hidden：

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

來源

2016-11-09 23:36:45 Johannes

垂直元素列表，其中每行縮小其寬度以匹配內部內容

回答

相關問題