时间戳

首页 > 解决方案 > 如何使用 flexbox 突出显示导航栏链接的整个“框部分”？

html - 如何使用 flexbox 突出显示导航栏链接的整个“框部分”？

问题描述

我的第二个问题在这里。我能够使用没有 flexbox 的 CSS 来完成这项工作。

在此处输入图像描述

我在这里粘贴了上面的代码：

https://codepen.io/kkpm/pen/MWgdOZE

html,
body {
  margin: 0px;
  padding: 0px;
}

nav {
  height: 60px;
  background-color: maroon;
  vertical-align: middle;
}

#links {
  float: right;
  line-height: 60px;
}
#links li {
  display: inline-block;
}

#links li a {
  display: table-cell;
  vertical-align: middle;
  height: auto;
  padding: 1%;
  padding-right: 20px;
  padding-left: 28px;
  color: white;
  text-decoration: none;
}
#links li a:hover {
  display: table-cell;
  vertical-align: middle;
  height: auto;
  padding: 1%;
  padding-right: 20px;
  padding-left: 28px;
  background-color: blue;
  color: white;
  text-decoration: none;
}
#links ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#logo {
  float: left;
}

下面的 HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Portfolio</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <nav id="navbar">
      <div id="logo"><img src="flag.JPG" alt="" height="60px" /></div>
      <div id="links">
        <ul>
          <li><a href="#">Welcome</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
    <section id="welcome">Hi!</section>
  </body>
</html>

上面代码的问题是我通过调整 px 来观察事物。我想<li>始终将文本垂直居中，同时将其周围的蓝色框区域填满，因为没有更好的术语来描述它，无论如何都是单元格。

如何在不使用 javascript格式化<ul>/<li>元素的情况下使用 flexbox（或任何其他方法）获得相同的结果？

试图做到这一点让我发疯。我彻底搜索了谷歌。然而，我遇到了困难，因为我对 flexbox 的理解很薄弱。

我尝试过的一些事情：

  1. 我将填充和边距设置为 0px*
  2. 我将 box-sizing 设置border-box为 HTML
  3. 我设置nav为 60px
    然后我尝试设置nav li为
    display: flex; justify-content: flex-end;
  4. 对于徽标 div，我将其设置为固定位置justify-content: flex-start
  5. 我读了这个网站试图格式化这个https://css-tricks.com/snippets/css/a-guide-to-flexbox/

问题是我无法获得指向中心和蓝色突出显示部分的链接以突出显示。我对 flexbox 感到非常困惑，如果有人可以指导我一步一步地指导我如何使用 flexbox 获得以下结果，我将不胜感激。我会一遍又一遍地研究你的答案，直到我掌握了如何创建这个固定的导航栏。

标签： htmlcssflexbox

解决方案

您可以使用display: flex;然后应用align-items: center;以使元素垂直居中。这将是一种更清洁的方法而不是使用floats

html,
body {
  margin: 0px;
  padding: 0px;
}

nav {
  background-color: maroon;
  display: flex;
  align-items: center;
}

#logo {
  display: flex;
  flex-grow: 1;
  padding-left: 0.5em;
}

#logo img {
  max-height: 30px;
}

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

#links li {
  display: inline-block;
  padding: 1em;
}

#links li:hover {
  background: blue;
}

#links li a {
  color: white;
  text-decoration: none;
}
<nav id="navbar">
  <div id="logo">
    <img src="data:image/png;base64,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"
      alt="" />
  </div>
  <div id="links">
    <ul>
      <li><a href="#">Welcome</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
<section id="welcome">Hi!</section>

推荐阅读