在列表中垂直对齐链接 [英] Vertically align Links in Lists

问题描述

我有以下HTML标记：

I've got the following HTML markup;

<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中的链接看起来像这样垂直排列;

I would like the links within the (blocked) LIs to appear vertically aligned like this;

链接需要是< li> 的100％，因为无论用户点击他们需要点击该链接， t想使用JS / jQuery做一个ONCLICK事件。

The link needs to be 100% of the <li> as whereever the user clicks they need to click that link and I don't want to use JS/jQuery to do an ONCLICK event.

我的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/

推荐答案

在< a> （css）中使用 line-height ）

要使您的链接垂直对齐，您需要将其设置为与< li> 。
您的< li> height 为 150px 。因此， line-height 应为 150px 到。

与 DEMO 和下面的代码相同。

Use line-height in your <a> (css)
To get your link vertical aligned, you need to set it as the same height as the <li>.
Your <li> height is 150px. So your line-height should be 150px to.
Like in the DEMO and code below here.

Css： p>

Css:

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

DEMO

DEMO

关于线条高度的详细信息

这篇关于在列表中垂直对齐链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！