如何解决链接高度过高并将列出的项目水平对齐以匹配同一级别的问题？
Posted
技术标签:
【中文标题】如何解决链接高度过高并将列出的项目水平对齐以匹配同一级别的问题？【英文标题】：How can I fix that the links have too much height and align the listed items horizontally to match the same level? 【发布时间】：2022-01-21 17:36:04 【问题描述】：已经尝试了几个小时来解决这个问题，但我不知道是什么导致了问题，因为我没有给链接或列出的项目任何高度，但是当我摆脱 img 他们很好但是当我把它放回去一切都搞砸了。谁能帮我解决这个问题
列出的项目未对齐并且链接/列出的项目的高度对我来说没有意义，这是我第一次发布
*
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>【问题讨论】：
a 必须是 inside li 因为 ul 只允许 li 子级。先解决这个问题，然后重新检查。 永远不要使用无效标记。
是的，也不要将 href 留空（如果您想阻止它将您发送到另一个页面，请使用 href="#!"）。基本上将所有 4 个菜单项更改为 <li><a href="index.html">ITEM</a></li>。我认为那解决了你的问题？
【参考方案1】：
对齐问题
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，这取决于父元素的宽度（并且只能用于块级元素，默认情况下是li）。由于父元素的宽度越大，文本内容越多，文本越多的元素的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，这样万一用户将您的网页翻译成不同文本方向的语言，布局也会随之而来。
视口单位
到目前为止，您使用viewport-units vw/vh设置img的大小，header的高度，ul的边距，甚至a li的字体大小！这会使您的标题以一种相当不连贯且（警告：固执己见）难看的方式缩放。
我推荐使用rem，因为它不依赖于视口，但依赖于用户的缩放级别。这样，您可以更轻松地保证用户将看到的最终结果实际上是您的想法，并且仍然允许用户更改字体大小（这直接取决于缩放级别) 如果它对他们来说太小了。
另外，目前ul 上的margin-right 使用vh，使得水平长度取决于垂直视口单位，这似乎令人困惑。也许您打算使用vw（尽管我仍然推荐rem）。无论如何，当你使用 Flexbox 时，margin-right 是多余的，因为它的 flex-children 都不能增长（你没有声明它们）。
outline: none 的问题
删除每个元素results in bad accessibility的轮廓！使用键盘导航您的页面的用户将无法看到他们当前关注的元素。如果删除轮廓，则需要通过其他方式使焦点元素引人注目，例如使用box-shadow 或更改background-color。
HTML
正如其他人已经提到的：您应该始终编写正确的 HTML！就您而言，这些是您违反的规范：
ol 和 ul 可能只有 li 或 脚本支持元素 作为子元素。
li 只能用作 ol、ul 和 menu 的子级。
不符合规范可能会导致不需要的行为，并且浏览器会尝试尽可能地修复 HTML，这可能会导致不同的DOM 取决于浏览器。
a 元素不能有href 属性，不管其他人是否不同意。如果不是，则该元素表示"a placeholder for where a link may otherwise have been placed"。
您的img 没有指定其alt 属性，这又是results in bad accessibility。没有它，辅助技术将无法正确理解/宣布它。如果您的图像纯粹是展示性的， 请考虑向其添加属性role="presentation"。然而，大多数标志图像实际上并不是展示性的。在这种情况下，建议对图片进行简短说明，例如“网站名称的徽标”。
一般来说，如果您想了解更多关于辅助功能的信息，我强烈推荐来自MDN、Google 和W3 的辅助功能学习指南。通常（如果您对此感兴趣），我还建议至少偶尔在官方规范中查找定义，例如在HTML's Living Standard、CSS' many specifications 或（如果您使用它）ECMAScript's specification（javascript 规范） .
【讨论】：
【参考方案2】：margin-top: 60%：如果您使用浏览器工具/布局选项卡检查所有四个元素，您会发现不仅第四项，所有项都有不同 margin-top 和垂直位置。原因是margin-top 的百分比值是根据该项目的实际宽度计算得出的，并且“Contact”一词明显比其他三个长，导致垂直位置不同。
你可以做什么：使用top:40%; – 或任何你喜欢的值（尝试不同的值来找到你想要的），这也需要position: relative; 才能产生效果。或者您可以使用像素值，如上一个答案中所建议的那样。下面的sn-p包含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>【讨论】：
这并没有解决链接（a）“高度过高”的问题。 margin-top的很好解释。
@OskarGrosser “太高”显然是指链接的垂直位置。所以margin-top 的百分比值是的原因（链接在我的sn-p中是垂直对齐的）。
“太高”是指a 元素拉伸 与图像一样高。如果你检查你的锚元素，你会发现它们仍然伸展得那么高。您只对齐了li 元素，它们位于内部 a 元素，但它们不是链接。
@OskarGrosser 显然 OP 想要一些垂直偏移，这是我可以解释问题中的 margin-top 设置的唯一方法，因此我也将“高度过高”解释为指（不同的）链接的垂直位置以上是关于如何解决链接高度过高并将列出的项目水平对齐以匹配同一级别的问题？的主要内容，如果未能解决你的问题，请参考以下文章
如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]