我有一些文字元素(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中是否有可能导致此问题的内容?
答案 0 :(得分:1)
GregorianCalendar gc = new GregorianCalendar();
gc.setTimeInMillis(System.currentTimeMillis());
gc.add(Calendar.MINUTE, -5);
System.out.println(new java.util.Date().getTime());
System.out.println(new java.util.Date(gc.getTime().getTime()).getTime());
是块级元素,因此会尝试占用父级的全宽
使用h
根据内容设置宽度,并使用换行符display:inline-block
<br/>
&#13;
console.log(document.getElementById("one").offsetWidth)
console.log(document.getElementById("two").offsetWidth)
console.log(document.getElementById("three").offsetWidth)
&#13;
.main-text {
position: relative;
left: 50%;
transform: translate(-50%, 0);
text-align: center;
color: #848484;
font-family: "Roboto";
font-size: 40px;
display: inline-block;
}
&#13;
答案 1 :(得分:1)
所以这发生了,因为h1是块级元素。如果您将display:inline-block
添加到CSS中,您会看到偏移量的差异。使用默认的display:block
元素将填充页面的宽度,即使您将其推高超过50%然后重置它。