时间戳

首页 > 解决方案 > 如果我的最大屏幕尺寸为 100%，为什么链接会转到我的屏幕一侧？

html - 如果我的最大屏幕尺寸为 100%，为什么链接会转到我的屏幕一侧？

问题描述

所以我正在制作一个带有 HTML 和 CSS 的网站，我想要有 2 个导航栏（例如，1 个用于注册和登录），另一个用于“主页”、“项目”、“合作伙伴”等。 ，所以我做了：

@charset "utf-8";

/* CSS Document */

* {
  font-family: 'Shippori Antique B1', sans-serif;
}

html,
body {
  max-width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  transition: .3s;
  color: #fff;
}

a:hover {
  transition: .3s;
  text-decoration: underline;
}

.navigation {
  color: #fff;
  background: #006CFF;
  padding: 10px;
}

.top-navigation {
  text-align: right;
  width: 100%;
  padding: 15px;
  background: #0084FF;
}
<script src="https://kit.fontawesome.com/a3f36ff0b4.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" type="image/png" href="images/logo.png" />

<div class="top-navigation">
  <a href="register.html">Register</a>
  <a href="register.html">Log In</a>
</div>

<div class="navigation"></div>

由于某种原因，我的 div 类“top-navigation”“登录”链接消失了，现在我知道我可以通过添加“float:right;”来解决这个问题。到“顶部导航”的 CSS 部分，但由于某种原因，主要的“导航”div 类将消失。

任何人都可以帮助我解决这个问题吗？

标签： htmlcss

解决方案

width: 100%;只需从中删除.top-navigation，您的项目就会按照您的预期显示。

.top-navigation {
    text-align: right; 
    padding: 15px;
    background: #0084FF;
}

推荐阅读