在响应式水平导航中垂直对齐多行文本答案

【问题标题】：vertical align multiline text in a responsive horizontal nav在响应式水平导航中垂直对齐多行文本
【发布时间】：2017-03-09 12:45:43
【问题描述】：

尝试在响应式水平列表中垂直对齐多行文本（链接）。我的导航高度是固定的。

我的标记重组是这样的。你可以看到所有的链接都有均匀分布的宽度，如果容器变小了，第三个链接项会跨越多行，我怎样才能让它垂直对齐？

.list {
  font-family: arial;
  background: white;
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  width: 100%;
  table-layout: fixed;
}

.list-item {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.list-item a {
  box-sizing: border-box;
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  background: blue;
  padding: 0 15px;
  line-height: 48px;
  min-height: 48px;
  max-height: 48px;
}

.list-item a:hover {
  background: red;
}

<ul class="list">
  <li class="list-item"><a href="">one</a></li>
  <li class="list-item"><a href="">two</a></li>
  <li class="list-item"><a href="">three three three</a></li>
  <li class="list-item"><a href="">four</a></li>
  <li class="list-item"><a href="">five</a></li>  
</ul>

【问题讨论】：

标签： html css navigation responsive

【解决方案1】：

您想遇到第三个链接排成一行的情况吗？！比你必须使用类似 white-space: nowrap 的东西，如果你想在你需要的行下显示每个“树”行

.list-item {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: blue;
}

.list-item:hover {
    background: red;
}

.list-item a {
    box-sizing: border-box;
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    background: blue;
    padding: 0 15px;
    /* line-height: 48px; */
    /* min-height: 48px; */
    max-height: 48px;
    height: 100%;
}

【讨论】：

【解决方案2】：

这是一个几乎可以满足您的需求的解决方案。唯一的缺点：实际链接区域（您可以点击的地方）没有跨越列表元素的整个高度（而是整个宽度）：

编辑：添加 a:focus 到评论后的最后一个规则选择器

.list {
  font-family: arial;
  background: white;
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  table-layout: fixed;
  width: 100%;
}
.list-item {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: blue;
  height: 48px;
}
.list-item a {
  box-sizing: border-box;
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  padding: 0 15px;
  line-height: 14px;
  width: 100%;
}
.list-item:hover, a:focus {
  background: red;
}

<ul class="list">
  <li class="list-item"><a href="">one</a></li>
  <li class="list-item"><a href="">two</a></li>
  <li class="list-item"><a href="">three three three</a></li>
  <li class="list-item"><a href="">four</a></li>
  <li class="list-item"><a href="">five</a></li>
</ul>

【讨论】：

我也有类似的解决方案，但不幸的是，我希望保留悬停、焦点与链接项的交互，即使在与键盘交互时也是如此。
我在评论后添加了a:focus 到最后一个规则选择器。虽然这只突出了焦点上的a 部分，但它仍然清晰可见。