html - 如何水平对齐标题和导航栏？-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 02:31:30

我有一个导航栏，我有一个标题。当我尝试将我的标题放在我的导航栏的同一“行”时，我的问题就出现了，如果这有意义的话，最初，当我放置我的 h2 元素时，文本会出现在导航栏上方。

当我修复 h2 元素时，它会左对齐并与我的导航栏重叠，即使我指定它在 HTML 中居中也是如此。有人可以解释一下是什么让网页这样做吗？以及为什么固定元素不能四处移动(左对齐、居中、右对齐等)

我不知道是不是我的容器有问题，我的容器将是基本的、良好的“容器”，用于将显示在此页面中的所有信息。

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

JSFIDDLE

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:fixed Do 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%;
}

jsFiddle

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

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

jsFiddle

关于html - 如何水平对齐标题和导航栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36438749/

文章推荐：代码生成错误 : Conversion to struct from double is not possible

文章推荐： c - 如果前一个数组是同一位置的字符，则填充数组

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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