如何在導航欄中平均間隔鏈接？
[英]How do I space out the links equally in a nav bar?
問題描述
嗨，我是 html 和 css 的新手，我無法在導航欄中分隔鏈接。
這就是我想要得到的：圖片
這是我到目前為止所擁有的：
.topnav { overflow: hidden; background-color: white; border: 5px solid black; }.topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 30px; text-decoration: none; font-size: 17px; border-bottom: 3px solid transparent; }
<h1>ABOUT ME</h1> <div class="topnav"> <nav> <ul> <a href="aboutme.html">About Me</a> <a href="mypast.html">My Past</a> <a href="mypresent.html">My Present</a> <a href="myfuture.html">My Future</a> <a href="feedback.html">Feedback</a> </ul> </nav> </div>
4 個解決方案
解決方案1
1 已采納 2021-06-05 05:15:00
.topnav a {
display: inline-block;
color: black;
background-color: rgb(233, 233, 233);
text-align: center;
padding: 5px;
text-decoration: none;
font-size: 17px;
flex: 1;
border: 3px solid black;
}
ul{
display: flex;
justify-content: center;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 5px solid black;
border-bottom: 5px solid black;
padding: 0;
background-color: black;
}
解決方案2
0 2021-06-05 04:33:26
.topnav { overflow: hidden; background-color: white; border: 5px solid black; }.topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 30px; text-decoration: none; font-size: 17px; border-bottom: 3px solid transparent; } ul { display:flex; justify-content:space-between; align-items:center; padding: 0; }
<h1>ABOUT ME</h1> <div class="topnav"> <nav> <ul> <a href="aboutme.html">About Me</a> <a href="mypast.html">My Past</a> <a href="mypresent.html">My Present</a> <a href="myfuture.html">My Future</a> <a href="feedback.html">Feedback</a> </ul> </nav> </div>
解決方案3
0 2021-06-05 04:45:49
我已將您的導航元素重命名為“topnav”class。 不要使用顯示塊，而是使用顯示 flex，因為它有助於重新調整您的項目以相對於導航欄做出響應。 您可以使用justify-contents: space-evenly來確保每個文本項之間的距離相等。
我附上了下面的代碼示例片段供您測試！
.topnav { overflow: hidden; background-color: white; border: 5px solid black; }.topnav ul { display: flex; justify-content: space-evenly; color: black; text-align: center; text-decoration: none; font-size: 17px; border-bottom: 3px solid transparent; }.topnav ul a { text-decoration: none; } <body> <h1>ABOUT ME</h1> <nav class="topnav"> <ul> <a href="aboutme.html">About Me</a> <a href="mypast.html">My Past</a> <a href="mypresent.html">My Present</a> <a href="myfuture.html">My Future</a> <a href="feedback.html">Feedback</a> </ul> </nav> </body>
解決方案4
0 2021-06-05 04:57:22
.topnav ul {
display: flex;
justify-content: space-around;
}
如何在導航欄中獲取我的導航鏈接？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.