Responsive navigation - keep links the same height when some wrap?

问题

Im making a menu for a responsive site. Im making the menu the full site width and each link 33%.

For wide screens everything is fine. The links have varying link text, so for smaller displays some links will wrap before others.

How can I make the links stay the same height (the 3rd example in my image below)? Ideally the entire area thats grey in my example would be a clickable link.

http://codepen.io/anon/pen/HokAh/

<ul>
  <li>
    <span>
      <a href="#">Link 1</a>
    </span> 
   </li>
   <li>
    <a href="#">Link 2 which has very very very long text</a>
  </li>
   <li>
    <a href="#">Link 3</a>
  </li>
</ul>

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

a {
  float: left;
  width: 33%;
  background: grey;
  padding: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid red;
}

回答1:

You can use display:table; on <ul> and display:table-cell; on <li>

See this FIDDLE

CSS :

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display:table;
  width:100%;
}

li {
  display:table-cell;
  width: 33%;
  background: grey;
  padding: 10px;
  border: 2px solid red;
}

---

Update

in order to make the whole table-cell clickable, you can add this css :

li {
    overflow:hidden;
}
a {
    display:block;
    margin: -10em;
    padding: 10em;
}

See this FIDDLE

来源：https://stackoverflow.com/questions/22632735/responsive-navigation-keep-links-the-same-height-when-some-wrap