主页 / 问题 / 1600580
Accepted
Дмитрий
Asked:2024-11-23 01:28:52 +0000 UTC2024-11-23 01:28:52 +0000 UTC

为什么元素放置会出现问题？

  • 772

我最近开始学习CSS和HTML并遇到以下问题：nav-links元素相对于剩余空间而不是整个导航栏居中

到目前为止，我已经设法按照我想要的方式仅通过添加一个不可见的元素来将其居中，但在我看来这是错误的，所以我希望得到更合理的建议。

/* Navigation Bar */

.navbar {
  width: 75%;
  height: 3.8rem;
  background-color: hwb(0 15% 85% / 0.473);
  border-radius: 40px;
  margin: auto;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
}

.logo h1 {
  display: flex;
  align-items: center;
  color: aliceblue;
  font-size: 20px;
}

.nav-links {
  display: flex;
  align-self: center;
  gap: 20px;
  margin: auto;
}

.nav-links a {
  color: aliceblue;
  text-decoration: none;
  padding: 8px 16px;
  transition: background-color 0.3s;
}
<header class="navbar">
  <div class="logo">
    <h1>TorFlicks</h1>
  </div>
  <nav class="nav-links">
    <a href="#">Главная</a>
    <a href="#">История</a>
    <a href="#">⌕</a>
  </nav>
</header>
<main>

html

1 个回答

  1. Best Answer

    h1最简单的解决方案是使用从流中删除position: absolute。那么它就不会参与计算其共同父级中其他元素的大小。

    当导航和标题相互重叠时，问题可能会出现在窄屏幕上。然而，通常在这种情况下，菜单隐藏在汉堡包下面，不会出现问题。

    严格来说，这样使用标签是不正确的h1。本质上，TopFlicks 是一个标志。而h1影响搜索引擎推广的是页面标题。

    /* Navigation Bar */

.navbar {
  width: 75%;
  height: 3.8rem;
  background-color: hwb(0 15% 85% / 0.473);
  border-radius: 40px;
  margin: auto;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  
  position: relative;
}

.logo h1 {
  display: flex;
  align-items: center;
  color: aliceblue;
  font-size: 20px;
  
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  margin: 0;
}

.nav-links {
  display: flex;
  align-self: center;
  gap: 20px;
  margin: auto;
}

.nav-links a {
  color: aliceblue;
  text-decoration: none;
  padding: 8px 16px;
  transition: background-color 0.3s;
  
  display: grid;
  place-content: center;
}
    <header class="navbar">
  <div class="logo">
    <h1>TorFlicks</h1>
  </div>
  <nav class="nav-links">
    <a href="#">Главная</a>
    <a href="#">История</a>
    <a href="#">⌕</a>
  </nav>
</header>
<main>

    • 3

相关问题