如何去除灰色背景颜色和右侧浏览器边界之间的间隙

Question

body{
font-family:'Montserrat';

}
.content{
background-color:#d9d9d9;
}


p.dates{
display:inline-block;
font-weight:800;
margin-right:20px;
width:120px;
text-align:center;
margin-top:0;
margin-bottom:0;

}
p.content{
display:inline-block;
text-align:left;
width:85%;
height:50px;

margin-top:0;
margin-bottom:0;

}

</div>
<div class="timeline-content">
<br>
<hr>
<p class="dates">28 June 1971</p>
<p class="content">Elon Reeve Musk was born on June 28 1971 in Pretoria, South Africa.</p><br><hr>

<p class="dates">1988</p>
<p class="content">Elon moved to Canada when at the age of 17 to attend Queen's University.</p><br><hr>
<p class="dates">1990</p>
<p class="content">Elon was transferred to University of Pennsylvania, where he received dual bachelor's degrees in Economics and Physics.</p><br><hr>
<p class="dates">1995</p>
<p class="content">He moved to california to begin a Ph.D in applied physics and material sciences at Stanford University, but dropped out after 2 days to pursue a business career.</p><br><hr>
</div>
</div>
</body>
</html>

灰色背景的页面下部的文本就是我所说的

我正在创建这个致敬网页，但在包含相应日期/年份详细信息的部分，我无法删除灰色背景和右侧浏览器边界之间的间隙。

Answer 1

有一种方法可以在不更改HTML结构的情况下做到这一点。在.content内部使用CSS中的calc()函数来表示宽度。并设置如下：

width: calc(100% - 144px);

注意：它可以工作，但值144px是固定的。原因是date(即120px(有固定的宽度，并且有类似margin的属性。

body {
font-family: 'Montserrat';
}
.content {
background-color: #d9d9d9;
}
p.dates {
display: inline-block;
font-weight: 800;
margin-right: 20px;
width: 120px;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
p.content {
display: inline-block;
text-align: left;
width: calc(100% - 144px);
height: 50px;
margin-top: 0;
margin-bottom: 0;
}

</div>
<div class="timeline-content">
<br>
<hr>
<p class="dates">28 June 1971</p>
<p class="content">Elon Reeve Musk was born on June 28 1971 in Pretoria, South Africa.</p><br>
<hr>
<p class="dates">1988</p>
<p class="content">Elon moved to Canada when at the age of 17 to attend Queen's University.</p><br>
<hr>
<p class="dates">1990</p>
<p class="content">Elon was transferred to University of Pennsylvania, where he received dual bachelor's degrees in Economics and Physics.</p><br>
<hr>
<p class="dates">1995</p>
<p class="content">He moved to california to begin a Ph.D in applied physics and material sciences at Stanford University, but dropped out after 2 days to pursue a business career.</p><br>
<hr>
</div>
</div>
</body>
</html>