如何使用flexbox垂直對齊列表的列表索引？

我需要創建一個列表自定義列表索引這是垂直居中對列表項的內容。如何使用flexbox垂直對齊列表的列表索引？

由於我已經使用flex，我認爲最簡單的方法是給列表項目display:flex;並設計它。這是有效的，但儘快，因爲列表項包含其他元素，它會混淆。正如你可以在中看到下面的例子。

什麼是垂直居中列表索引的最佳方式？

- 更新實施例 -

ol { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
} 
 

 
ol > li { 
 
    display: flex; 
 
    margin-top: 20px; 
 
    align-items: center; 
 
} 
 

 
ol > li:before { 
 
    color: red; 
 
    content: attr(data-count)' ›'; 
 
    flex display: block; 
 
    flex-shrink: 0; 
 
    text-align: right; 
 
    min-width: 24px; 
 
    padding-right: 5px; 
 
}

<ol> 
 
    <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> 
 
    <li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ol>

來源

2016-12-29 Stefan Kunze

嗯...對CSS的方式大不不，好醇」表？ :) https://jsfiddle.net/vLk5Lxs4/ – sinisake

@sinisake爲什麼大不禁？我認爲這是一個很好的解決方案 – Oriol

@Oriol，謝謝，但是，因爲問題是關於flex ...我剛剛離開那個小提琴作爲一個建議...;） – sinisake

解決方案是使用display:table，而不是彎曲，在這種特殊情況下。

ol { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
    display:table; 
 
    border-spacing:0 20px; 
 
} 
 

 
ol > li { 
 
    display:table-row; 
 
    vertical-align:middle;  
 
} 
 

 
ol > li:before { 
 
    color: red; 
 
    content: attr(data-count)' ›'; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    text-align: right; 
 
    white-space: nowrap; 
 
    padding-right: 10px; 
 
}

<ol> 
 
    <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> 
 
    <li data-count="999 99">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ol>

來源

2016-12-29 20:12:03 sinisake

我想我會用這個解決方案 - 因爲我不必向現有的標記添加添加包裝。 –

這裏的絕對定位，以保持垂直居中的箭頭的方法。

ol { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
} 
 

 
ol > li { 
 
    margin: 20px 0 0; 
 
    padding-left: 36px; 
 
    position: relative; 
 
} 
 

 
ol > li:before { 
 
    color: red; 
 
    content: attr(data-count)' ›'; 
 

 
    font-size: 14px; 
 
    line-height: 1; 
 
    
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; /* vertically center */ 
 
    margin-top: -7px; /* and shift up based on 16px height */ 
 
}

<ol> 
 
    <li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li> 
 
    <li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ol>

來源

2016-12-29 15:37:55

這或多或少正是我在此期間如何修復它。但是這會產生一個新問題，我需要知道list-index的寬度，因爲它是由list-item的邊距定義的。 –

@StefanKunze這是一個新問題？我使用的是與你的例子中爲排水溝指定的寬度相同的「30px」寬度。 –

@StefanKunze我做了一個輕微的編輯，所以'30px'只需要在一個地方再次。在'：before'（而不是你的CSS中）上的'width'，它現在是在'li'上的填充。 –

我認爲最好的辦法是包裏面li所有元素在另外一個元素，應該解決這個問題。

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 200px; 
 
} 
 
ul > li { 
 
    display: flex; 
 
    margin-top: 20px; 
 
    align-items: center; 
 
} 
 
ul > li:before { 
 
    color: red; 
 
    content: '›'; 
 
    flex display: block; 
 
    flex-shrink: 0; 
 
    text-align: center; 
 
    width: 30px; 
 
}

<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
    <li> 
 
    <p>Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</p> 
 
    </li> 
 
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> 
 
</ul>

來源

2016-12-29 15:38:19

謝謝你的想法 - 希望有一個解決方案，而不需要額外的包裝。 –

如何使用flexbox垂直對齊列表的列表索引？

回答

相關問題