リストアイテムを境界矩形で整列します

Question

display: inline-flexを使用するリストがあります。リスト内の異なる項目のフォントサイズが異なります。私は、リスト項目がテキストの下部の位置に従って整列していることを発見します。これにより、小さいテキストサイズのアイテムは他のアイテムよりも低く表示されます。

ただし、項目を境界矩形のベースで揃えたいとします。

私はこの問題を解決するためにハックを見つけました：私は表示したいテキストの両側にドットを含むスパンを配置し、このドットのfont-sizeをリストの最大フォントサイズのサイズに設定し、これらのスパンのうちvisibilityをhiddenに設定しました。

これを達成するための非ハックで純粋なCSSの方法はありますか？

JSFiddle

body { 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    display: inline-flex; 
 
    border: 1px solid #000; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 64px; 
 
    height: 64px; 
 
    font-size: 64px; 
 
    line-height: 64px; 
 
} 
 

 
li:last-child { 
 
    font-size: 16px; 
 
} 
 

 
span { 
 
    font-size: 64px; 
 
    visibility: hidden; 
 
} 
 

 
hr { 
 
    position: absolute; 
 
    top: 47px; 
 
    width: 204px; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>THREE</li> 
 
</ul> 
 

 
<hr> 
 

 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li><span>.</span>THREE<span>.</span></li> 
 
</ul>

Answer 1

あなたはこの場合ul要素には、コンテナにdisplay: flexを追加することによって、あなたが欲しいアラインメントを達成することができます。

fiddle

body { 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: flex; 
 
} 
 

 
li { 
 
    display: inline-flex; 
 
    border: 1px solid #000; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 64px; 
 
    height: 64px; 
 
    font-size: 64px; 
 
    line-height: 64px; 
 
} 
 

 
li:last-child { 
 
    font-size: 16px; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>THREE</li> 
 
</ul>