我已经创建了一个导航栏，但我不知道如何将其置于网页中央。请告知，我已将链接附加到底部的 fiddle 。不知道还要写什么，因为堆栈溢出希望我在发布此内容之前提供更多详细信息。希望您能尽快回答我的问题!
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;
}
最佳答案
给你，
https://jsfiddle.net/90m2m0uh/
.topnav a {
/* dont use this */
/* float:left */
}
请注意“ float ”CSS
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
关于html - 如何使用 CSS 和 HTML 使导航栏居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48999759/