Question

我有一个导航栏，我有一个标题。当我试图将我的标题放在同一条＆＃34;线上时，我的问题就出现了。我的导航栏如果有意义，最初，当我放置我的h2元素时，文本会出现在导航栏上方。

当我修复h2元素时，它将保持对齐并重叠我的导航栏，即使我指定它在HTML中居中。有人可以解释是什么让网页这样做的吗？为什么固定元素不能移动（左对齐，居中，右对齐等）

我不知道我的容器是否是问题，我的容器将是基本的，好的＆＃34;容器＆＃34;对于将在此页面中显示的所有信息。

最后，我是HTML新手，从长远来看，任何信息都是有用的。谢谢。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您需要做的就是同时提供h2和navbar display:inline-block;。无需position:fixed;。同时重新排列HTML，以便导航栏位于h2之前。

https://jsfiddle.net/muor36cv/

Answer 2

请参阅MDN上的规范。

position:fixed 不要为元素留空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不要移动它。打印时，将其放置在每页的固定位置。该值始终创建新的堆叠上下文。

所以你不应该用它来并排放置两个元素。相反，您可以使用float，inline block，flexbox等。以下是float：

的示例

.navbar {
  float: left;
  width: 50%;
}
.container {
  float: right;
  width: 50%;
}

jsFiddle

修改：为了使标题居中，您可以使用下面的更新代码CSS3 calc()。

.navbar {
  float: left;
  width: 175px;
  margin-left: 25px;
}
.container {
  float: right;
  width: calc(100% - 200px); /*175+25=200*/
}

<强> jsFiddle

如何水平对齐标题和导航栏？

2 个答案: