Question

我有一个由可点击的块组成的菜单。它的简单ul/li/a层次由Joomla吐出。

我喜欢可以点击完整的块，并且文本与bottom垂直对齐，想要这两个似乎都是问题。

HTML：

<div>
    <ul>
        <li><a>Klinisch onderzoek</a></li>
        <li><a>Geneesmiddel- registratie</a></li>
        <li><a>Medische hulpmiddelen</a></li>
        <li><a>Orthopedie</a></li>
        <li><a>Leesbaarheids- test</a></li>
    </ul>
</div>

CSS：

ul li {
    list-style-type: none;
    float: left;
    margin: 0 0 15px 15px;
    background-color: #BA2876;
}
ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    height: 130px;
    width: 130px;
}
ul li a:hover {
    text-decoration: underline;
}

请参阅我的小提琴here

Answer 1

不是将锚点设置为display：block，而是将它们设置为table-cell，然后设置垂直对齐：

ul li a {
    display: table-cell;
    vertical-align:bottom;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    height: 130px;
    width: 130px;
}

<强> jsFiddle example

Answer 2

您可以使用display: table-cell和vertical-align: bottom。

以下示例：

ul li {
  list-style-type: none;
  float: left;
  margin: 0 0 15px 15px;
  background-color: #BA2876;
  }

ul li a {
  display: table-cell;
  vertical-align: bottom;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  padding: 10px;
  height: 130px;
  width: 130px;
  }

ul li a:hover {
	text-decoration: underline;
  }

<div>
    <ul>
        <li>
            <a>Klinisch onderzoek</a>
        </li>
        <li>
            <a>Geneesmiddel- registratie</a>
        </li>
        <li>
            <a>Medische hulpmiddelen</a>
        </li>
        <li>
            <a>Orthopedie</a>
        </li>
        <li>
            <a>Leesbaarheids- test</a>
        </li>
    </ul>
</div>

将文本对齐到A元素中的底部

2 个答案: