對齊文本考慮下面的標記列表元素

的底部：對齊文本考慮下面的標記列表元素

<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>的底部，以確保底部邊界也對齊。

Here is the jsfiddle這個不是工作。

需要支持IE8>向上。

注：項目必須浮動

來源

2012-11-29 Ben Foster

從裏取出float:left和li元素上添加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 */ 
}

DEMO

來源

2012-11-29 11:13:26 Sowmya

項目必須浮動。 –

項目現在對齊左側，如果您看到演示 – Sowmya

問題是列表項包含塊元素，因此無法使用'display：inline'。我已經更新了原來的小提琴，使這個更清晰。 –

使用display:table

和display:table-cell上跨度元素噸;

此外，由我最大的字體大小可以達到84px高。

LIVE DEMO

來源

2012-11-29 11:54:56 Danield

1.文本不內聯。 2. IE8支持'table-cell'嗎？ –

「從Internet Explorer 8開始，表格顯示樣式允許元素與表格的可視佈局緊密平行。」 http://msdn.microsoft.com/en-us/library/ms530751%28v=VS.85%29.aspx – Danield

對齊文本考慮下面的標記列表元素

回答

相關問題