Question

我已经浏览了一段时间，但我相信我的情况稍微有些独特。我有一个简单的导航，它是＆lt; ul＆gt;列表，每个＆lt; li＆gt;包含锚＆lt; a＆gt;。第一个＆lt; li＆gt;包含一个图像，这是一个标志。

我希望每个后续＆lt; li＆gt;和＆lt; a＆gt;元素扩展到徽标的高度，无论它是什么（我希望这个解决方案中唯一的静态高度在徽标的图像上定义，如果可能的话）。元素也应垂直居中。当您将鼠标悬停在＆lt; a＆gt;上时标签，背景和光标选择应覆盖整个高度。

我尝试过使用display：flex;和display：table-cell，vertical-align：middle和一堆其他东西。我几乎得到了它，但在＆lt; a＆gt;的上方和下方有一些空的空间。标签。我能看到修复它的唯一方法是在＆lt; a＆gt;上使用静态高度。标签，但我在这里张贴，看看是否有人知道任何替代品。

请注意，这不一定是跨浏览器的解决方案（虽然这样会很好）。

另请注意，这些元素将包含子导航下拉列表，因此可能包含overflow：hidden的解决方案在这种情况下可能不适用。

以下是代码：

a {
  font-family: 'Trebuchet MS';
  text-decoration: none;
}
nav {
  background: #444;
}
nav > ul > li {
  display: table-cell;
  vertical-align: middle;
}
nav > ul > li img {
  display: table-cell;
  vertical-align: middle;
  height: 24px;
  padding: 24px;
}
nav > ul > li a {
  display: table-cell;
  vertical-align: middle;
  padding: 24px;
  color: #fff;
}
nav > ul > li:hover a {
  cursor: pointer;
  background: white;
  color: #444;
}

<nav role="navigation">
  <ul>
    <li>
      <img src="http://i.imgur.com/ZPB7f3l.png" />
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Work</a>
    </li>
    <li><a href="#">Ideas</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</nav>

这是小提琴：http://jsfiddle.net/0br6r0sh/1

感谢任何建议！

谢谢，莱恩

Answer 1

我尝试使用Flexbox实现您的要求。不幸的是，它不是跨浏览器方式，因为它只适用于Chrome。

<img>被赋予display: block以删除其周围的所有填充/边距。我为display: flex，<ul>和<li>使用了三套<a>。

a {
  font-family: 'Trebuchet MS';
  text-decoration: none;
}
nav {
  background: #444;
}

nav > ul {
  display: flex;
  flex-direction: row; 
  align-items: stretch;
}
nav > ul > li {
  background-color: #555;
  display: flex;
}
nav > ul > li img {
  height: 24px;
  padding: 24px;
  background-color: #ccc;
  display: block;
}
nav > ul > li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
  color: #fff;
  background-color: #666;
}
nav > ul > li:hover a {
  cursor: pointer;
  background: white;
  color: #444;
}

<nav role="navigation">
  <ul>
    <li>
      <img src="http://i.imgur.com/ZPB7f3l.png" />
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Work</a>
    </li>
    <li><a href="#">Ideas</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</nav>

水平导航中100％儿童身高，动态徽标/元素高度

1 个答案: