我有一些文本元素 (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 中是否有可能导致此问题的原因?
最佳答案
h
是一个 block 级元素,所以它会尝试占据父元素的整个宽度
使用 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>
关于javascript - HTML/CSS - 无论文本内容如何,所有文本元素都是 23 像素宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49063298/