Vertically align Links in Lists

问题

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>

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

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.

My CSS so far is

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

I have created a JSFiddle at http://jsfiddle.net/midnitesonnet/T3bWE/

回答1:

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:

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

DEMO

More information about Line-height

回答2:

The problem is your

float:left;

Remove it from the .blockmenu li and the list will then show vertically.

来源：https://stackoverflow.com/questions/21553694/vertically-align-links-in-lists

标签

html

css

vertical-alignment