我目前正在學習如何為漢堡包選單編碼。我想讓它在一行指定的列中居中對齊，而且我正試圖對導航中的鏈接做同樣的處理。然而，我不能讓鏈接正確地居中。
。.grid-tainer {
display: grid;
grid-template-areas: "header menu"。
grid-template-columns: repeat(8, 1fr) 。
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: 黑色。
}
.nav-test {
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}<div class="grid-tainer">
<div class=" item header">
<ul class="nav-test">
<li>a href="#"/span>> 首頁</a></li>/span>
<li><ahref="#"> 關于我</a></li>
<li><ahref="#"/span>> 音樂</a></li>/span>
<li><ahref="#"/span>> Tours</a>/span></li>
<li><ahref="#"> 聯系</a></li>>
</ul>/span>
</div>/span>
<div class=" item menu"> </div>>
</div>/span>我的目標是在最后一列的漢堡包選單上也做同樣的事情。為了使標題正確居中，我忘記了設定什么？
uj5u.com熱心網友回復：
瀏覽器默認為ul元素添加了左邊的填充，這就把你的nav-test串列的內容推了過去。
最簡單的解決方案是重新設定padding：
.nav-test {
padding-left:0px; /*添加這個 */
display: flex;
方向：行。
justify-content: space-around;
list-style-type: none;
}
uj5u.com熱心網友回復：
如果你去檢查nav-test容器，你會發現在容器的左邊有一個額外的40px的padding。這就是你的鏈接不在中心的原因。要解決這個問題，只需在你的nav-test類中添加padding-left: 0;。試著運行這個片段，看看這是否為你解決了問題。
.grid-tainer {
display: grid;
grid-template-areas: "header menu"。
grid-template-columns: repeat(8, 1fr) 。
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: 黑色。
}
.nav-test {
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
padding-left: 0;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}<!doctype html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel=" stylesheet"
href="menu_design.css"/span>>
<head>
<div class="grid-container">
<div class=" item header">
<ul class="nav-test">
<li>a href="#"/span>> 首頁</a></li>/span>
<li><a href="#"> 關于我</a></li>
<li><ahref="#"/span>> 音樂</a></li>/span>
<li><ahref="#"/span>> Tours</a>/span></li>
<li><ahref="#"> 聯系</a></li>>
</ul>/span>
</div>/span>
<div class=" item menu"> </div>>
</div>/span>
</head>
</html>/span>uj5u.com熱心網友回復：
你可以看到你的導航有一些li標簽，這些標簽在父標簽ul里面，所以你可以做的是在你的父元素中設定display: flex;和justify-content: space-around;或者justify-content: space-between;來將導航欄中的每個元素居中
.grid-tainer {
display: grid;
grid-template-areas: "header menu"。
grid-template-columns: repeat(8, 1fr) 。
}
.header {
grid-area: header;
grid-column: span 7;
margin: 2px;
background-color: 黑色。
}
.nav-test {
display: flex;
direction: row;
justify-content: space-around;
list-style-type: none;
padding-left: 0;
}
.nav-test a {
color: white;
}
.menu {
display: flex;
grid-area: menu;
grid-column: span 1;
margin: 2px;
background-color: black;
}<!doctype html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel=" stylesheet"
href="menu_design.css"/span>>
<head>
<div class="grid-container">
<div class=" item header">
<ul class="nav-test">
<li>a href="#"/span>> 首頁</a></li>/span>
<li><a href="#"> 關于我</a></li>
<li><ahref="#"/span>> 音樂</a></li>/span>
<li><ahref="#"/span>> Tours</a>/span></li>
<li><ahref="#"> 聯系</a></li>>
</ul>/span>
</div>/span>
<div class=" item menu"> </div>>
</div>/span>
</head>
</html>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/318883.html
標籤：
上一篇：只有陣列的最后一個元素起作用
下一篇：PHPEchoipv4和Ipv6