Javascript HTML/CSS-无论文本内容如何，所有文本元素的宽度均为23像素

我有一些文本元素（

h1

），它们由于某种原因都是相同的宽度，即使其中包含不同的文本

HTML:

出于某种原因，当我运行以下JS代码时：

console.log(document.getElementById("one").offsetWidth)
console.log(document.getElementById("two").offsetWidth)
console.log(document.getElementById("three").offsetWidth)

---

他们都以

23

的身份登录。如果有帮助的话，我的屏幕宽度是1920像素。我的CSS中有什么可能导致这种情况吗？

h

是一个块级元素，因此它将尝试占据父元素的整个宽度

使用

display:inline block

根据内容设置宽度，对于换行，使用

console.log（document.getElementById（“一”）.offsetWidth）
console.log（document.getElementById（“两”）.offsetWidth）
console.log（document.getElementById（“三”）.offsetWidth）

.main文本{
位置：相对位置；
左：50%；
转换：转换（-50%，0）；
文本对齐：居中；
颜色：#848484；
字体系列：“机器人”；
字体大小：40px；
显示：内联块；
}

文本


文本文本


text之所以发生这种情况，是因为h1是块级元素。如果将
display:inline block
添加到CSS中，您将看到偏移量的差异。使用默认的
display:block
元素将填充页面宽度，即使您将其推到50%以上，然后将其重置
 除非你提供一些屏幕截图或代码片段，否则很难理解你真正想要实现什么，特别是对于HTML和CSS相关的问题（一般而言）。你一定要分享代码-这可能是任何东西。包装器可能导致这种情况或任何情况。如果没有额外的信息，很难调试。你在哪里包括JS？我很确定你是在完整的HTML发布之前运行JS的rendred@TemaniAfif不，我用标题中的
window.onload=myFunction
运行它，您可以在上面的示例中看到它正在工作。日志就显示在那里。@pj100是的，我看到了，但我不知道为什么它对我不同
.main-text {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  color: #848484;
  font-family: "Roboto";
  font-size: 40px;
}

console.log(document.getElementById("one").offsetWidth)
console.log(document.getElementById("two").offsetWidth)
console.log(document.getElementById("three").offsetWidth)