如何解决链接高度过高的问题并水平对齐列出的项目以匹配同一级别？
How can I fix that the links have too much height and align the listed items horizontally to match the same level?
我已经尝试了几个小时来解决这个问题，但我不知道是什么导致了这个问题，因为我没有给链接或列出的项目任何高度，但是当我摆脱 img 他们是很好，但是当我把它放回去时，一切都变得一团糟。谁能帮我解决这个问题
列出的项目没有对齐，link/listed 项目的高度太高，我觉得没有意义，这是我第一次发帖
*{
padding:0;
margin:0;
text-decoration:none;
list-style:none;
outline:none;
}
body{
background-image:linear-gradient(147deg,#000428,#004e92);
height:100vh;
}
header{
min-height:5vh;
}
nav{
display:flex;
align-content:center;
justify-content:space-between;
}
#Logo{
width:22vh;
height:22vh;
}
ul{
margin-right:23vh;
width:70%;
justify-content:space-between;
align-content:center;
display:flex;
}
a li{
text-align:center;
margin-top:60%;
color:#54041c;
font-size:3.5vh;
font-family:Verdana;
}
**Html Part**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Home</title>
</head>
<body>
<!-- header-->
<header>
<nav>
<img id="Logo" src="Logo.png">
<ul>
<a href="index.html"><li>Home</li></a>
<a href=""><li>Clubs</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
</nav>
</header>
<!-- -->
<main>
</main>
</body>
</html>
margin-top: 60%：如果您使用浏览器工具/布局选项卡检查所有四个元素，您会看到不仅第四项，而且 所有 项都有一个不同 margin-top 和垂直位置。原因是 margin-top 的百分比值是根据该项目的实际 width 计算的，并且“Contact”一词明显比其他三个词长，这导致不同的垂直位置。
您可以做什么：使用 top:40%; – 或您喜欢的任何值（尝试不同的值以找到您想要的值），并且还需要 position: relative; 才能产生效果。或者您可以使用像素值，如先前答案中所建议的那样。下面的代码片段包含 top:40%; 和 position: relative; 解决方案：
*{
padding:0;
margin:0;
text-decoration:none;
list-style:none;
outline:none;
}
body{
background-image:linear-gradient(147deg,#000428,#004e92);
height:100vh;
}
header{
min-height:5vh;
}
nav{
display:flex;
align-content:center;
justify-content:space-between;
}
#Logo{
width:22vh;
height:22vh;
}
ul{
margin-right:23vh;
width:70%;
justify-content:space-between;
align-content:center;
display:flex;
}
a li{
text-align:center;
position: relative;
top:40%;
color:#54041c;
font-size:3.5vh;
font-family:Verdana;
}
**Html Part**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Home</title>
</head>
<body>
<!-- header-->
<header>
<nav>
<img id="Logo" src="Logo.png">
<ul>
<a href="index.html"><li>Home</li></a>
<a href=""><li>Clubs</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
</nav>
</header>
<!-- -->
<main>
</main>
</body>
</html>
对齐问题
Flexbox 将 align-items 用于所需目的，但您使用了 Grid 的 align-content。由于未设置 align-items，它默认为 stretch，这会导致您看到的行为。使用正确的 属性 将使元素沿横轴居中：
.correct {align-items:center}
.incorrect {align-content:center}
/* Ignore; for a "beautiful" presentation */
body {
display: flex;
gap: .8rem;
font-family: sans-serif;
}
div {
display: flex;
background-color: gray;
}
div>:nth-child(even) {background-color: #e0e0e0}
div>:nth-child(odd) {background-color: #f4f4f4}
header {
font-weight: bold;
font-size: large;
}
section {
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
<section>
<header>With <code>align-items</code></header>
<div class="correct">
<span>A<br>Very<br>Tall<br>Element</span>
<span>Num. 1</span>
<span>Num. 2</span>
<span>Num. 3</span>
</div>
</section>
<section>
<header>With <code>align-content</code></header>
<div class="incorrect">
<span>A<br>Very<br>Tall<br>Element</span>
<span>Num. 1</span>
<span>Num. 2</span>
<span>Num. 3</span>
</div>
</section>
由于您在 nav 和 ul 上都使用了 align-content，锚点被拉伸到图像的高度。
您还在 li 上设置了 margin-top，这取决于 parent 元素的宽度（并且只能用于 block-level 元素，li 默认情况下是）。由于 parent 元素的宽度随着 text-content 的增加而变大，因此具有更多文本的元素具有更大的 margin-top 值：
span {margin-top:10%}
/* Ignore; recreating your situation */
body {display:flex}
span {display:inline-block}
<div>
<span>Short text.</span>
</div>
<div>
<span>This is a very long text that will increase the <code>margin-top</code> value.</span>
</div>
解决上述问题应该会使您的 HTML/CSS 看起来类似于：
nav {display: flex}
ul {
display: flex;
align-items: center;
}
/* Ignore; recreating your situation */
img {
width: 8rem;
height: 8rem;
background-color: lightgray;
}
li {background-color: white}
nav {
border: 1px solid black;
background-color: gray;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
<nav>
<img src>
<ul>
<!-- <a> inside <li> instead of the other way around. More on this later! -->
<li><a>Home</a></li>
<li><a>Contact</a></li>
<li><a>About</a></li>
</ul>
</nav>
其他CSS位
我建议在适用的情况下使用 logical properties，这样如果用户将您的网页翻译成其他 text-direction 的语言，布局将随之而来。
视口单位
截至目前，您使用 viewport-units vw/vh 设置 [=29= 的大小]、[=30= 的高度]、ul 的边距，甚至 font-size 共 a li！这会使您的 header 比例变得相当不连贯且（警告：自以为是）难看。
我建议使用 rem，因为它不依赖于视口，但是 依赖于用户的 zoom-level。这样，您可以更轻松地保证用户将看到的最终结果实际上是您的想法，并且 仍然 允许用户更改 font-size （这直接取决于在 zoom-level) 如果对他们来说太小了。
此外，目前 ul 上的 margin-right 使用 vh，使水平长度依赖于垂直视口单位，这似乎令人困惑。也许您打算使用 vw（尽管我仍然推荐 rem）。无论如何，当你使用 Flexbox 时，margin-right 是多余的，因为它的 flex-children 中的 none 可以增长（你没有声明它们）。
outline: none
的问题
正在删除每个 元素results in bad accessibility 上的轮廓！使用键盘浏览您的页面的用户将无法看到他们当前处于焦点的元素。如果删除轮廓，则需要以其他方式使焦点元素引人注目，例如使用 box-shadow 或更改 background-color.
HTML
正如其他人已经提到的：您应该始终写正确的 HTML！在您的情况下，这些是您违反的规范：
ol 和 ul 可能只有 li 或 script-supporting 个元素 作为 children.li 只能用作 ol、ul 和 menu 的 child。
不符合规范可能会导致不需要的行为，浏览器将尝试尽可能地修复 HTML，这可能会导致不同的 DOM，具体取决于浏览器.
然而，a 元素不能具有 href 属性，无论其他人是否同意。如果不是，则该元素表示 "a placeholder for where a link may otherwise have been placed".
您的 img 没有指定其 alt 属性，这又是 results in bad accessibility。没有它，辅助技术将无法 understand/announce 正确地使用它。如果您的图像 纯粹是展示性的， 考虑向其添加属性 role="presentation"。然而，大多数 logo-images 实际上并不是表象。在这种情况下，建议对图像进行简短说明，例如“ 网站名称 的徽标”。
一般来说，如果您想了解有关辅助功能的更多信息，我强烈推荐 MDN, Google, and W3. Generally (and if you're into this), I also recommend at least occasionally looking up definitions in the official specifications, for example in HTML's Living Standard, CSS' many specifications, or (if you use it) ECMAScript's specification（JavaScript 规范）中有关辅助功能的学习指南。
我已经尝试了几个小时来解决这个问题，但我不知道是什么导致了这个问题，因为我没有给链接或列出的项目任何高度，但是当我摆脱 img 他们是很好，但是当我把它放回去时，一切都变得一团糟。谁能帮我解决这个问题
列出的项目没有对齐，link/listed 项目的高度太高，我觉得没有意义，这是我第一次发帖
*{
padding:0;
margin:0;
text-decoration:none;
list-style:none;
outline:none;
}
body{
background-image:linear-gradient(147deg,#000428,#004e92);
height:100vh;
}
header{
min-height:5vh;
}
nav{
display:flex;
align-content:center;
justify-content:space-between;
}
#Logo{
width:22vh;
height:22vh;
}
ul{
margin-right:23vh;
width:70%;
justify-content:space-between;
align-content:center;
display:flex;
}
a li{
text-align:center;
margin-top:60%;
color:#54041c;
font-size:3.5vh;
font-family:Verdana;
}
**Html Part**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Home</title>
</head>
<body>
<!-- header-->
<header>
<nav>
<img id="Logo" src="Logo.png">
<ul>
<a href="index.html"><li>Home</li></a>
<a href=""><li>Clubs</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
</nav>
</header>
<!-- -->
<main>
</main>
</body>
</html>
margin-top: 60%：如果您使用浏览器工具/布局选项卡检查所有四个元素，您会看到不仅第四项，而且 所有 项都有一个不同 margin-top 和垂直位置。原因是 margin-top 的百分比值是根据该项目的实际 width 计算的，并且“Contact”一词明显比其他三个词长，这导致不同的垂直位置。
您可以做什么：使用 top:40%; – 或您喜欢的任何值（尝试不同的值以找到您想要的值），并且还需要 position: relative; 才能产生效果。或者您可以使用像素值，如先前答案中所建议的那样。下面的代码片段包含 top:40%; 和 position: relative; 解决方案：
*{
padding:0;
margin:0;
text-decoration:none;
list-style:none;
outline:none;
}
body{
background-image:linear-gradient(147deg,#000428,#004e92);
height:100vh;
}
header{
min-height:5vh;
}
nav{
display:flex;
align-content:center;
justify-content:space-between;
}
#Logo{
width:22vh;
height:22vh;
}
ul{
margin-right:23vh;
width:70%;
justify-content:space-between;
align-content:center;
display:flex;
}
a li{
text-align:center;
position: relative;
top:40%;
color:#54041c;
font-size:3.5vh;
font-family:Verdana;
}
**Html Part**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Home</title>
</head>
<body>
<!-- header-->
<header>
<nav>
<img id="Logo" src="Logo.png">
<ul>
<a href="index.html"><li>Home</li></a>
<a href=""><li>Clubs</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
</nav>
</header>
<!-- -->
<main>
</main>
</body>
</html>
对齐问题
Flexbox 将 align-items 用于所需目的，但您使用了 Grid 的 align-content。由于未设置 align-items，它默认为 stretch，这会导致您看到的行为。使用正确的 属性 将使元素沿横轴居中：
.correct {align-items:center}
.incorrect {align-content:center}
/* Ignore; for a "beautiful" presentation */
body {
display: flex;
gap: .8rem;
font-family: sans-serif;
}
div {
display: flex;
background-color: gray;
}
div>:nth-child(even) {background-color: #e0e0e0}
div>:nth-child(odd) {background-color: #f4f4f4}
header {
font-weight: bold;
font-size: large;
}
section {
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
<section>
<header>With <code>align-items</code></header>
<div class="correct">
<span>A<br>Very<br>Tall<br>Element</span>
<span>Num. 1</span>
<span>Num. 2</span>
<span>Num. 3</span>
</div>
</section>
<section>
<header>With <code>align-content</code></header>
<div class="incorrect">
<span>A<br>Very<br>Tall<br>Element</span>
<span>Num. 1</span>
<span>Num. 2</span>
<span>Num. 3</span>
</div>
</section>
由于您在 nav 和 ul 上都使用了 align-content，锚点被拉伸到图像的高度。
您还在 li 上设置了 margin-top，这取决于 parent 元素的宽度（并且只能用于 block-level 元素，li 默认情况下是）。由于 parent 元素的宽度随着 text-content 的增加而变大，因此具有更多文本的元素具有更大的 margin-top 值：
span {margin-top:10%}
/* Ignore; recreating your situation */
body {display:flex}
span {display:inline-block}
<div>
<span>Short text.</span>
</div>
<div>
<span>This is a very long text that will increase the <code>margin-top</code> value.</span>
</div>
解决上述问题应该会使您的 HTML/CSS 看起来类似于：
nav {display: flex}
ul {
display: flex;
align-items: center;
}
/* Ignore; recreating your situation */
img {
width: 8rem;
height: 8rem;
background-color: lightgray;
}
li {background-color: white}
nav {
border: 1px solid black;
background-color: gray;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
<nav>
<img src>
<ul>
<!-- <a> inside <li> instead of the other way around. More on this later! -->
<li><a>Home</a></li>
<li><a>Contact</a></li>
<li><a>About</a></li>
</ul>
</nav>
其他CSS位
我建议在适用的情况下使用 logical properties，这样如果用户将您的网页翻译成其他 text-direction 的语言，布局将随之而来。
视口单位
截至目前，您使用 viewport-units vw/vh 设置 [=29= 的大小]、[=30= 的高度]、ul 的边距，甚至 font-size 共 a li！这会使您的 header 比例变得相当不连贯且（警告：自以为是）难看。
我建议使用 rem，因为它不依赖于视口，但是 依赖于用户的 zoom-level。这样，您可以更轻松地保证用户将看到的最终结果实际上是您的想法，并且 仍然 允许用户更改 font-size （这直接取决于在 zoom-level) 如果对他们来说太小了。
此外，目前 ul 上的 margin-right 使用 vh，使水平长度依赖于垂直视口单位，这似乎令人困惑。也许您打算使用 vw（尽管我仍然推荐 rem）。无论如何，当你使用 Flexbox 时，margin-right 是多余的，因为它的 flex-children 中的 none 可以增长（你没有声明它们）。
outline: none
的问题
正在删除每个 元素results in bad accessibility 上的轮廓！使用键盘浏览您的页面的用户将无法看到他们当前处于焦点的元素。如果删除轮廓，则需要以其他方式使焦点元素引人注目，例如使用 box-shadow 或更改 background-color.
HTML
正如其他人已经提到的：您应该始终写正确的 HTML！在您的情况下，这些是您违反的规范：
ol和ul可能只有li或 script-supporting 个元素 作为 children.li只能用作ol、ul和menu的 child。
不符合规范可能会导致不需要的行为，浏览器将尝试尽可能地修复 HTML，这可能会导致不同的 DOM，具体取决于浏览器.
然而，a 元素不能具有 href 属性，无论其他人是否同意。如果不是，则该元素表示 "a placeholder for where a link may otherwise have been placed".
您的 img 没有指定其 alt 属性，这又是 results in bad accessibility。没有它，辅助技术将无法 understand/announce 正确地使用它。如果您的图像 纯粹是展示性的， 考虑向其添加属性 role="presentation"。然而，大多数 logo-images 实际上并不是表象。在这种情况下，建议对图像进行简短说明，例如“ 网站名称 的徽标”。
一般来说，如果您想了解有关辅助功能的更多信息，我强烈推荐 MDN, Google, and W3. Generally (and if you're into this), I also recommend at least occasionally looking up definitions in the official specifications, for example in HTML's Living Standard, CSS' many specifications, or (if you use it) ECMAScript's specification（JavaScript 规范）中有关辅助功能的学习指南。