垂直對齊的元素不工作

我想要實現的是一組元素（框）與鏈接裏面。這個環節應該是在底部右側，但vertical-align屬性是不工作垂直對齊的元素不工作

What it looks like

HTML

<ul> 
    <li><a href="#">TEST 1</a></li> 
    <li><a href="#">TEST 2</a></li> 
    <li><a href="#">TEST 3</a></li> 
    <li><a href="#">TEST 4</a></li> 
    <li><a href="#">TEST 5</a></li> 
    <li><a href="#">TEST 6</a></li> 
    <li><a href="#">TEST 7</a></li> 
</ul>

CSS

ul li 
{ 
    display: inline-table; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
    border: 1px solid black; 
} 
ul li a 
{ 
    text-align: right; 
    vertical-align: bottom; 
    display: block; 
    height: 100%; 
    padding: 10px; 
}

我也嘗試了幾種垂直對齊和絕對定位的組合，也使用了包含a元素的包裝，但沒有付出任何努力。

問題

我怎麼能定位在右下角的鏈接，而仍然在整個廣場擴大a - 元素？

來源

2013-06-29 bytecode77

垂直對齊僅適用於表單元格：

ul li a { 
text-align: right; 
vertical-align: bottom; 
display: table-cell; 
height: 100%; 
padding: 10px; 
}

的jsfiddle：http://jsfiddle.net/4JMav/8/

來源

2013-06-29 21:40:45

我會將文本放在一個範圍內，然後將該範圍絕對定位在a範圍內。 Yhis可以很容易地將其設置在右下方。

你的CSS會是這個樣子：

ul li { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
    border: 1px solid black; 
} 
ul li a { 
    display: block; 
    height: 100%; 
    position: relative; 
} 
ul li a span { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
}

和一個例子：http://jsfiddle.net/E2kfd/

來源

2013-06-29 21:40:39 Pevara

我個人不喜歡引入額外的標記來對齊。 –

@AndyG同意，但提問者明確表示他希望他的鏈接佔據整個「li」（這是有道理的），而且你的答案並非如此。我不是'display：table -...'css的大粉絲，所以這是IMO正確的方法去... – Pevara

@PeterVT好點;） –

下面是一種方式，使用定位：

ul li 
{ 
    display: inline-table; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    margin: 5px; 
    border: 1px solid black; 
} 
ul li a 
{ 
    text-align: right; 
    display: inline-block; 
    padding: 10px; 
    position: absolute; 
    bottom: 0; right: 0; 
}

就個人而言，雖然，我可能會放棄給UL display: inline-table和使用table-cell爲李家的。

jsfiddle

來源

2013-06-29 21:41:39

您需要以下變化：

ul li a 
{ 
    ... 
    display: table-cell; 
    ... 
}

（演示：http://jsfiddle.net/4JMav/6/）

垂直對齊的工作方式不同表格單元格和別的：第一個，它對齊內容，另一方面，它會對齊線框中元素的文本內容。如果將塊放入（內嵌）表格中，CSS渲染器將生成具有默認垂直對齊的anonymous table cell，並將該塊放入其中。但是，當您將內部元素本身轉換爲表格單元格時，它會應用您設置的垂直對齊。

來源

2013-06-29 21:52:36

垂直對齊的元素不工作

回答

相關問題