响应式导航 - 一些包装时保持链接的高度相同? [英] Responsive navigation - keep links the same height when some wrap?

问题描述

我正在为响应式网站制作菜单.我使菜单成为整个站点的宽度和每个链接 33%.

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

推荐答案

你可以在

和 display:table 上使用 display:table;-cell; on

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

  看到这个FIDDLE

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

  <小时>

  更新

  为了使整个表格单元格可点击，您可以添加此css:

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

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

  看到这个FIDDLE

  See this FIDDLE

  这篇关于响应式导航 - 一些包装时保持链接的高度相同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！