HTML/CSS - 无论文本内容如何，​​所有文本元素都是 23 像素宽

Question

我有一些文本元素 (h1)，由于某些原因它们的宽度都相同，即使其中包含不同的文本也是如此。

HTML:

<h1 class="main-text" id="one">text</h1>
<h1 class="main-text" id="two">texttextext</h1>
<h1 class="main-text" id="three">texttextexttexttextext</h1>

CSS:

.main-text {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  color: #848484;
  font-family: "Roboto";
  font-size: 40px;
}

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

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

他们都记录为 23。如果有帮助，我的屏幕宽度是 1920px。我的 CSS 中有什么东西可能导致这个吗？

Answer 1

h 是块级元素，所以它会尝试占据父元素的整个宽度

使用display:inline-block根据内容设置宽度，换行使用<br/>

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

.main-text {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  color: #848484;
  font-family: "Roboto";
  font-size: 40px;
  display: inline-block;
}

<h1 class="main-text" id="one">text</h1>
<br/>
<h1 class="main-text" id="two">texttextext</h1>
<br/>
<h1 class="main-text" id="three">texttextexttexttextext</h1>

Answer 2

这是因为 h1 是块级元素。如果将 display:inline-block 添加到 CSS，您将看到偏移量的差异。使用默认 display:block 元素将填充页面的宽度，即使您将其推到 50% 以上然后重新设置它也是如此。