Question

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

我的加价重组是这样的。您可以看到所有链接都具有均匀分布的宽度，如果容器变小，第3个链接项将在多行上运行，我怎样才能将其垂直对齐？

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

Answer 1

你想要第三个链接在一行的情况？！你必须使用像white-space：nowrap这样的东西，如果你想在你需要的线下显示每条“树”线

overflow:visible

Answer 2

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

编辑：在评论

之后将a:focus添加到最后一个规则选择器

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: