已經嘗試了幾個小時來解決這個問題，但我不知道是什么導致了問題，因為我沒有給鏈接或列出的專案任何高度，但是當我擺脫 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>uj5u.com熱心網友回復：
margin-top: 60%：如果您使用瀏覽器工具/布局選項卡檢查所有四個元素，您不僅會看到第四個專案，而且所有專案都有不同的邊距頂部，因此具有不同的垂直位置。原因是for的百分比值margin-top是根據 那個item的實際寬度計算的，而“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>uj5u.com熱心網友回復：
對齊問題
Flexboxalign-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>既然你使用align-content上都nav和ul，錨被拉伸到影像的高度。
您還設定了margin-topon li，這取決于父元素的寬度（并且只能用于塊級元素，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 位
我建議在適用的情況下使用邏輯屬性，因此如果用戶將您的網頁翻譯成不同文本方向的語言，布局將隨之而來。
視口單位
到目前為止，您使用視口單位vw/vh來設定 的大小img、高度header、邊距ul，甚至是字體大小a li！這會使您的標題以一種相當不連貫且（警告：自以為是）難看的方式縮放。
我建議使用rem，因為它不依賴于視口，但是是依賴于用戶的縮放級別。這樣，您可以更輕松地保證用戶將看到的最終結果實際上是您的想法，并且如果字體大小太小，則仍然允許用戶更改字體大小（直接取決于縮放級別）他們。
此外，目前margin-right在ul使用vh，使得一個水平長度依賴于垂直視單元，這似乎混淆上。也許您打算使用vw（盡管我仍然推薦rem）。無論如何，當你使用 Flexbox 時，它margin-right是多余的，因為它的 flex-children 都不能增長（你沒有宣告它們）。
問題與 outline: none
洗掉每個元素的輪廓會導致可訪問性不佳！使用鍵盤導航您的頁面的用戶將無法看到他們當前關注的元素。如果洗掉輪廓，則需要以另一種方式使重點元素引人注目，例如使用box-shadow或更改background-color。
HTML
正如其他人已經提到的：您應該始終撰寫正確的 HTML！就您而言，這些是您反對的規范：
ol并且ul可能只有li或支持腳本的元素作為子元素。li僅可用于作為一個孩子ol，ul和menu。
不符合規范可能會導致不需要的行為，瀏覽器會盡量修復 HTML，這可能會導致不同的DOM取決于瀏覽器。
a但是，元素不能具有該href屬性，無論其他人是否不同意。如果不是，則該元素表示“一個可能已放置鏈接的位置的占位符”。
您img沒有alt指定它的屬性，這又會導致糟糕的可訪問性。沒有它，輔助技術將無法正確理解/宣布它。如果您的影像純粹是展示性的，請考慮role="presentation"向其添加屬性。但是，大多數徽標影像實際上并不是展示性的。在這種情況下，建議對影像進行簡短說明，例如“網站名稱的徽標”。
一般來說，如果您想了解更多有關可訪問性的資訊，我強烈推薦MDN、Google和W3 中有關可訪問性的學習指南。通常（如果您對此感興趣），我還建議至少偶爾查看官方規范中的定義，例如HTML 的 Living Standard、CSS 的許多規范，或者（如果您使用它）ECMAScript 的規范（JavaScript 的規范） .
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386901.html
上一篇：在不作業之前使用樣式化組件并將道具傳遞給psedo元素
下一篇：Flexbox高度和背景圖片高度