垂直对齐列表中的链接

Question

我有以下HTML标记;

<div class="blockmenu">
<ul>
    <li><a href="#!">item 1</a></li>
    <li><a href="#!">item 2</a></li>
    <li><a href="#!">item 3</a></li>
    <li><a href="#!">item 4</a></li>
    <li><a href="#!">item 5</a></li>
</ul>
</div>

我希望（阻止的）LI中的链接像这样垂直对齐;

链接需要是<li>的100％，因为用户点击它们需要点击该链接，我不想使用JS / jQuery来执行ONCLICK事件。

到目前为止我的CSS是

.blockmenu ul {
    padding: 0px !important;
    margin: 0px !important;
}

.blockmenu li {
    padding: 0px !important;
    margin: 0px !important;
    list-style: none;
    list-style-position: inside;
    display: block;
    position: relative;
    width: 25%; 
    float: left;
    height: 150px;
}

.blockmenu li a { 
       height: 150px;
       margin: 10px;
       display: block;
       text-align: center;
       color: #fff;
} 

.blockmenu li:nth-child(3n-2) a {
      background: #e31937;
}
.blockmenu li:nth-child(3n-1) a {
      background: #002f5f;
}
.blockmenu li:nth-child(3n) a {
      background: #dcdcdd;
      color: #58595b;
}

我在http://jsfiddle.net/midnitesonnet/T3bWE/

创建了一个JSFiddle

Answer 1

在line-height （css） 中使用<a>
要使link垂直对齐，您需要将其设置为与<li>相同的高度。你的<li> height是150px。因此，line-height应为150px。
就像在 DEMO 和下面的代码一样。

<强>的CSS：

.blockmenu li a { 
    ....
    line-height:150px;    /* The height of your li */
} 

<强> DEMO

More information about Line-height

Answer 2

问题是你的

float:left;

从.blockmenu li中删除它，然后列表将垂直显示。