3

次のマークアップが与えられます：

<ul>
    <li><span>One</span></li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
    <li><span>Four</span></li>
    <li><span>Five</span></li>
</ul>

そして次のCSS：

body {
 font-family: Arial, sans-serif;
 font-size: 14px;
}

ul {
 list-style-type: none;
 padding: 0;
 margin: 0;   
}

li {
 border-bottom: 1px solid red;      
 float: left;
 margin-left: 10px;
 height: 70px; /* height of largest element */
}

span {
 font-weight: bold;
 display: block; /* important, needs to be block */
}

li:nth-child(2) {
 font-size: 2em;   
}

li:nth-child(3) {
 font-size: 3em;   
}

li:nth-child(4) {
 font-size: 4em;   
}

li:nth-child(5) {
 font-size: 5em;   
}

各リストアイテムに異なるサイズのテキストが含まれている場合。

各<span>要素をその親の下部に<li>揃えて、下部の境界線も揃えるようにします。

これが機能しないのjsfiddleです。

IE8以上をサポートする必要があります。

注：アイテムはフロートする必要があります

4

2 に答える 2

6

liから削除float:leftして追加します display:inline; vertical-align:bottom; 

li {
 border-bottom: 1px solid red;      
 display:inline;  vertical-align:bottom;  
 margin-left: 10px;
 height: 70px; /* height of largest element */
}

デモ

于 2012-11-29T11:13:26.460 に答える
2

display:tableli要素で使用

display:table-cellスパン要素上。

また、私が作成した最大のフォントサイズは84pxの高さです。

ライブデモ

于 2012-11-29T11:54:56.823 に答える