如何让活动的蓝色标签填满背景导航栏的整个高度

Question

我设计了一个黑底白字的导航栏。活动选项卡应具有蓝色背景。由于某种原因，我的 css 显示活动选项卡的高度略低于背景导航栏。为什么？如何使活动蓝色标签的高度与导航栏的高度匹配？

对于我的导航栏样式，搜索到 meyerweb 的末尾 css 在您看到的位置重置：

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* end of css reset */

body {
  padding: 0;
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
}

nav {
  height: 50px;
  width: 100%;
  background-color: black;
  background-image: none;
  background-repeat: no-repeat;
  background-position: right;
}

nav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

nav a:hover {
  background-color: #ddd;
  color: black;
}

nav a.active {
  background-color: #01adef;
  color: white;
}

a.links:link {
  color: #01ADEF;
  text-decoration: none;
}

a.links:visited {
  color: #01adef;
  text-decoration: none;
}

a.links:hover {
  color: #000000;
  text-decoration: none;
}

a.links:active {
  color: #01adef;
  text-decoration: none;
}

<nav>
  <a class="active" href="index.html">Home</a>
  <a href="products.html">Products</a>
  <a href="support.html">Support</a>
  <a href="pricing.html">Pricing</a>
  <a href="about.html">About</a>
  <a href="contact_us.html">Contact</a>
</nav>

Answer 1

请在 .nav class 中添加 display:flex; 并将导航高度 50px 更改为最小高度：50px

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* end of css reset */

body {
  padding: 0;
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
}

nav {
  min-height: 50px;
  width: 100%;
  background-color: black;
  background-image: none;
  background-repeat: no-repeat;
  background-position: right;
  display:flex;
  flex-wrap:wrap;
}

nav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

nav a:hover {
  background-color: #ddd;
  color: black;
}

nav a.active {
  background-color: #01adef;
  color: white;
}

a.links:link {
  color: #01ADEF;
  text-decoration: none;
}

a.links:visited {
  color: #01adef;
  text-decoration: none;
}

a.links:hover {
  color: #000000;
  text-decoration: none;
}

a.links:active {
  color: #01adef;
  text-decoration: none;
}

<nav>
  <a class="active" href="index.html">Home</a>
  <a href="products.html">Products</a>
  <a href="support.html">Support</a>
  <a href="pricing.html">Pricing</a>
  <a href="about.html">About</a>
  <a href="contact_us.html">Contact</a>
</nav>

如何让活动的蓝色标签填满背景导航栏的整个高度

How can I make the active blue tab fill the entire height of the background nav bar

html

css

layout