如何使用 CSS 和 HTML 居中導航欄
[英]How to center navbar using CSS and HTML
問題描述
我創建了一個導航欄，但我不知道如何將它放在我的網頁上。 請指教，我已將鏈接附在底部的小提琴上。 不知道還有什么要寫的堆棧溢出是希望我在發布之前提供更多詳細信息。 希望你能盡快回答我的問題！
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<navbar>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</navbar>
</header>
<div class="row">
<p>Test text</p>
</div>
</body>
</html>
CSS
.row {
max-width: 1140px;
background-color: green;
margin: auto;
width: 80%;
}
body {
margin: 0;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
3 個解決方案
解決方案1
1 2018-02-27 01:39:40
干得好，
https://jsfiddle.net/90m2m0uh/
.topnav a {
/* dont use this */
/* float:left */
}
請注意“浮動”css
float CSS 屬性指定一個元素應該沿着其容器的左側或右側放置，允許文本和內聯元素環繞它。 該元素已從網頁的正常流中移除，但仍保留為流的一部分（與絕對定位相反）。
解決方案2
0 2018-02-27 01:40:17
不太確定你在問什么，但我認為你只是想要這個。 將 .topnav 在您的 css 中替換為此
.topnav {
background-color: #333;
overflow: hidden;
display: flex;
justify-content: center;
}
解決方案3
0 已采納 2018-02-27 01:59:29
您需要做兩件事 1. 將文本對齊方式更改為<navbar>
navbar{
text-align: center;
}
這將使菜單位於導航欄中的中心
2.去除浮動，增加顯示
.topnav a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
display: inline-block;
text-decoration: none;
font-size: 17px;
}
我們需要移除浮動，以便它們可以對齊，因為您正在強迫它們離開。 並且通過添加display: inline-block <a>標簽將尊重您分配的填充。
記住<a>標簽默認是內聯元素，你不能指定 top 和 bottom 值。
希望這就是你要找的。 如果需要，很樂意解釋或幫助提供更好的解決方案。
.row { max-width: 1140px; background-color: green; margin: auto; width: 80%; } body { margin: 0; } /* Add a black background color to the top navigation */ navbar{ text-align: center; } .topnav { background-color: #333; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { color: #f2f2f2; text-align: center; padding: 14px 16px; display: inline-block; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; } /* Add a color to the active/current link */ .topnav a.active { background-color: #4CAF50; color: white; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <navbar> <div class="topnav"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> </navbar> </header> <div class="row"> <p>Test text</p> </div> </body> </html>
HTML/CSS：如何使用 flexbox 在導航欄中居中標題？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.