Jak wyrównać w pionie listę-listę listy z Flexbox?

Potrzebowałem utworzyć listę z niestandardowym indeksem listy , który jest wyśrodkowany w pionie do zawartości elementów listy.Jak wyrównać w pionie listę-listę listy z Flexbox?

Ponieważ używam flex już pomyślałem, najłatwiejsze może być nadanie elementowi listy wartości display:flex; i nadanie jej stylu. To działa, ale tak szybko, jak element listy zawiera inne elementy, jest pomieszany. Jak możesz zobacz w poniższym przykładzie.

Jaki jest najlepszy sposób na pionowe wyśrodkowanie indeksu listy?

- Aktualizacja przykład -

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>

Źródło

2016-12-29 Stefan Kunze

Cóż ... jak o wielki nie-nie, dobry ol”tabelach na CSS sposób? :) https://jsfiddle.net/vLk5Lxs4/ – sinisake

@sinisake Dlaczego duży nie-nie? Myślę, że to dobre rozwiązanie. – Oriol

@Oriol, dziękuję, ale ponieważ pytanie dotyczy flexu ... Właśnie opuściłem to skrzypce jako sugestię ...;) – sinisake

rozwiązaniem mogłoby być wykorzystanie display:table zamiast flex, w tym konkretnym przypadku.

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>

Źródło

2016-12-29 20:12:03 sinisake

Myślę, że zastosuję to rozwiązanie - ponieważ nie muszę dodawać otoków do istniejących znaczników. –

oto sposób z pozycjonowania absolutnego do utrzymania w pozycji pionowej strzałki centralnie.

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>

Źródło

2016-12-29 15:37:55

To mniej więcej dokładnie to, jak to naprawiłem w międzyczasie. Ale to otwiera nowy problem, w którym muszę znać szerokość indeksu listy, jak to określa margines elementu listy. –

@StefanKunze Jak to jest nowy problem? Używam tej samej szerokości "30px", jaką podałeś w swoim przykładzie dla rynny. –

@StefanKunze Dokonałem niewielkiej edycji, więc '30px' jest potrzebne tylko w jednym miejscu. Zamiast 'width' na': before' (jak w twoim CSS), jest teraz dopełniane na 'li'. –

Myślę, że najlepszym rozwiązaniem jest, aby owinąć wszystkie elementy wewnątrz li w jednym innym elementem i to powinno rozwiązać problem.

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>

Źródło

2016-12-29 15:38:19

Dzięki za tę Pomysł - mamy nadzieję, że istnieje rozwiązanie bez potrzeby dodatkowego opakowania. –

Jak wyrównać w pionie listę-listę listy z Flexbox?

Odpowiedz

Powiązane problemy