0

我想要实现的是一组内部带有链接的元素（框）。此链接应位于右下角，但垂直对齐属性不起作用

它看起来像什么

jsFiddle：http: //jsfiddle.net/4JMav/

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-element 周围的包装器，但还不费力。

问题

如何将链接定位在右下角，同时仍将a-element 扩展到整个正方形？

4

4 回答 4

1

您需要进行以下更改：

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

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

Vertical-align 对表格单元格和其他任何内容的工作方式不同：首先，它对齐内容，其次，它对齐行框中元素的文本内容。如果将块放入（内联）表格中，CSS 渲染器会生成默认垂直对齐的匿名表格单元格并将块放入其中。但是当您将内部元素本身转换为表格单元格时，它会应用您设置的垂直对齐。

于 2013-06-29T21:52:36.530 回答
1

我会将文本放在一个跨度内，然后将该跨度绝对定位在 a. 可以很容易地将其设置在右下角。

你的 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-29T21:40:39.667 回答
1

Vertical-align 仅适用于表格单元格：

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

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

于 2013-06-29T21:40:45.043 回答
1

这是一种使用定位的方法：

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;
}

不过，就个人而言，我可能会给出 uldisplay: inline-table并table-cell用于 li 的。

jsfiddle

于 2013-06-29T21:41:39.543 回答