如何修复 HTML 网站页面右侧的奇怪偏移？ [复制]答案

【问题标题】：How to fix weird offset on right of page for HTML site? [duplicate]如何修复 HTML 网站页面右侧的奇怪偏移？ [复制]
【发布时间】：2021-03-02 14:40:07
【问题描述】：

我正在使用 Repl.it 开发一个网站。不幸的是，我遇到了一个我以前从未见过并且似乎无法解决的问题。如您所见，在示例中，有一个带有 3 个按钮的导航栏。但是，您看不到最右边按钮的右边缘。有没有办法解决这个问题？这是什么原因造成的？谢谢。

网站： The Site.

代码：

@property --col1 {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(255,175,0,1);
}
@property --col2 {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(255,115,0,1);
}
html, body{
  padding: 0;
  margin: 0;
  overflow-x: hidden !important;
  border: 0;
  outline: 0;
  width: 100%;
}
body {
  font-family: myFirstFont;
  background-color: #444444;
  text-align: center;
}
.topb {

  font-family: myFirstFont;
  background-color: #444444;
  color: #ffffff;
  flex: 1;
  border: none;
 
}
.topb.lt{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.topb.rt{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.topb:hover{
  background-color: #303030;
}
@font-face {
  font-family: myFirstFont;
  src: url(gemina.ttf);
}

.title {
  font-family: myFirstFont;
  text-align: left;
}

.para {
font-family: myFirstFont

}
#copyright {

  /*margin-top: 75vh;*/
  baackground-color: #363636;
  color:#ffffff;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;

}
#copyright-text{
  color: #ffffff;
  background-color: #363636;
}
#topbar {

background-color: #363636;
color: #ffffff;
width: 100%;
padding: 5px;
display: flex;
flex-direction: row;
}
#underconst{
  --col1: rgba(255,175,0,1);
  --col2: rgba(255,115,0,1);
  /*color: #ffae00;*/
  /*color: #ffaf00;*/
  animation: textcol 5s infinite linear alternate;
background-image: -moz-radial-gradient(circle, var(--col1) 0%, var(--col2) 100%);
background-image: -webkit-radial-gradient(circle, var(--col1) 0%, var(--col2) 100%);
background-image: radial-gradient(circle, var(--col1) 0%, var(--col2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes textcol{
  /*
  0%{--col1: rgba(255,175,0,1); --col2: rgba(255,115,0,1)};
  50%{--col1: rgba(255,115,0,1); --col2: rgba(255,175,0,1)};
  100%{--col1: rgba(255,175,0,1); --col2: rgba(255,115,0,1)};
  */
  
  0%{--col1: rgba(255,115,0,1); --col2: rgba(255,175,0,1)};
  50%{--col1: rgba(255,175,0,1); --col2: rgba(255,115,0,1)};
  100%{--col1: rgba(255,115,0,1); --col2: rgba(255,175,0,1)};
  
}

<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="title">
<h1>PRODUCTION</h1>
</div>
<div id="topbar">
  <button class="topb lt">HOME</button>
  <button class="topb">ABOUT</button>
  <button class="topb rt">ONLINE COMPETITON</button>
</div>
<br>
<br>
<h1 id="underconst">!UNDER CONSTRUCTION!</h1>
<div id="copyright">
<p id="copyright-text">&copy; 2019-2021 Spencer Leagra</p>
</div>
</body>
</html>

【问题讨论】：

你说的是滚动条吗？
不，顶部的按钮。即使你进入全屏，你也看不到按钮的右边缘。

标签： html css offset

【解决方案1】：

您的#topbar 样式缺少box-sizing: border-box;。目前元素的宽度设置为100%，但默认情况下（content-box）它不会考虑填充，因此通过添加填充它会将元素拉伸到100%之外。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

作为一些 UI 框架（例如 Bootstrap）的示例，它将使用以下类来确保所有元素都使用 border-box：

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

【讨论】：

谢谢，就是这样。出于某种奇怪的原因，直到 10 分钟后我才能接受这个答案。

【解决方案2】：

你说的是最左边的按钮吗？如果是这样，

尝试将其添加到 .topb.lt 类： padding-left: 5px;

【讨论】：

不，最右边的按钮不完全可见。上面的答案回答了我的问题。