我有一个导航栏，我有一个标题。当我尝试将我的标题放在我的导航栏的同一“行”时，我的问题就出现了，如果这有意义的话，最初，当我放置我的 h2 元素时，文本会出现在导航栏上方。
当我修复 h2 元素时，它会左对齐并与我的导航栏重叠，即使我指定它在 HTML 中居中也是如此。有人可以解释一下是什么让网页这样做吗？以及为什么固定元素不能四处移动(左对齐、居中、右对齐等)
我不知道是不是我的容器有问题，我的容器将是基本的、良好的“容器”，用于将显示在此页面中的所有信息。
最后，我是 HTML 的新手，从长远来看，任何信息都会有用。谢谢。
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
}
h2 {
margin-top: 50px;
font-size: 35px;
position: fixed;
}
.container {
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: #f1f1f1;
border: 2px solid #555;
}
li a {
display: block;
color: #000;
padding: 12px 0 12px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<h3 style="float: right; margin-right: 25px;">
<a href="http://www.steamcommunity.com/login/">SIGN IN WITH STEAM</a>
</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
<div class="container">
<h2 style="text-align: center;">Welcome to CSGOMarble!</h2>
</div>
<div class="navbar">
<ul>
<li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
<li><a href="coinflip.html">COINFLIP</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</body>
</html>最佳答案
请参阅 MDN 上的规范.
position:fixedDo not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context.
所以你不应该用它来并排放置两个元素。相反，您可以使用 float、inline block、flexbox 等。这是 float 的示例:
.navbar {
float: left;
width: 50%;
}
.container {
float: right;
width: 50%;
}
编辑:为了使标题居中，您可以使用 CSS3 calc()，更新了下面的代码。
.navbar {
float: left;
width: 175px;
margin-left: 25px;
}
.container {
float: right;
width: calc(100% - 200px); /*175+25=200*/
}
关于html - 如何水平对齐标题和导航栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36438749/