html - 带有 flexbox 的导航栏。 "Login"定位右边被溢出截断

Question

这是我的导航栏。我使用 display: flex 在 a 链接周围填充。但是，如果您在 JSfiddle 上看到(缩小)，它会导致:https://jsfiddle.net/Bradley_/3bhroby2/3/

我的“登录”会被稍微截断，尤其是当您放大或溢出时。有没有办法解决？这样它仍然位于右侧并略微缩进。感谢您的帮助。

CSS:

正文{

  margin: 0;
  overflow: visible;
}

#navbar {
  overflow: hidden;
    background-color: #D50000;
    padding:13px 20px;
      display: flex;
    justify-content: flex-start;

}

#navbar a {
        font-family: 'Exo', sans-serif;
    font-size: 15px;
    float: left;

    color: #f2f2f2;
    font-size: 15px;
    padding:13px 20px;
    text-decoration: none;

}

#navbar a:hover {
  background-color: rgba(0,0,0, 0.03);
  color: black;

}

#navbar a.active {
  background-color: #e60000;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.sticky + .content {
  padding-top: 70px;
}

.right {
  margin-left: auto;
}

HTML:

    <div id="navbar" class="sticky">
    <a class="active" href="index.php">Home</a>
        <a href='matchday.php'>Matchday</a>
        <a href='news.php'>News</a>
        <a href='stats.php'>Stats</a>
        <a href='gallery.php'>Gallery</a>
        <a href='forum.php'>Forum</a>
    <a href='more.php'>More...</a>
        <?php if( isset($_SESSION['username']) && !empty($_SESSION['username']) )
{
?>

        <a style="float:right;" class="open profile dropbtn" href="profile.php"></a>




<?php }else{ ?>
              <a class="right" href="#about">Sign Up </a>
              <a href="#about">Login</a>


<?php } ?>

Answer 1

#navbar 上的 padding 被添加到 width，这导致它溢出视口(viewport)。添加 box-sizing 规则以防止这种情况... more info here

updated fiddle

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  overflow: visible;
}

#navbar {
  overflow: hidden;
  background-color: #D50000;
  padding: 13px 20px;
  display: flex;
  justify-content: flex-start;
}

#navbar a {
  font-family: 'Exo', sans-serif;
  font-size: 15px;
  float: left;
  color: #f2f2f2;
  font-size: 15px;
  padding: 13px 20px;
  text-decoration: none;
}

#navbar a:hover {
  background-color: rgba(0, 0, 0, 0.03);
  color: black;
}

#navbar a.active {
  background-color: #e60000;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.sticky+.content {
  padding-top: 70px;
}

.right {
  margin-left: auto;
}

<div id="navbar" class="sticky">
  <a class="active" href="index.php">Home</a>
  <a href='matchday.php'>Matchday</a>
  <a href='news.php'>News</a>
  <a href='stats.php'>Stats</a>
  <a href='gallery.php'>Gallery</a>
  <a href='forum.php'>Forum</a>
  <a href='more.php'>More...</a>
  <a style="float:right;" class="open profile dropbtn" href="profile.php"></a>
  <a class="right" href="#about">Sign Up </a>
  <a href="#about">Login</a>
</div>