CSS标签背景颜色设置-仅将背景颜色应用于标签长度

Question

需要有关标签背景设置的帮助。以下是我正在使用的代码。请帮助我获得预期的输出，如下图所示。

$header=@"
<style>
@charset "UTF-8"; 
table
{
font-family:Arial;font-size:1em;width:45%;margin-left:1px; margin-bottom:5px;
border-collapse:collapse;
}
td 
{
font-size:1em;text-align:center;font-family:Arial;font-weight:normal;
border:0.8px solid MignightBlue;
padding:0px 0px 0px 0px;padding-bottom:5px;
}
th 
{
font-size:1.2em;font-weight:normal;
text-align:center;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
background-color:DarkslateGray;
color:snow;
}
name tr
{
color:#F00000;
background-color:snow;font-size:0.8em;font-family:Arial;
}
</style>
"@


ConvertTo-Html -body "<H1 style=color:snow;font-weight:normal;background-color:DarkslateGray;font-size:1.5em;font-family:Arial;text-align:left;background-repeat:no-repeat;background-size:100%>
 Database Consolidated Health Check Report </H1>" |`
 Out-File  C:\Temp\ConsolidatedReport.html 

当前输出：

期望的输出：

Answer 1

由于h1标签的屏蔽属性，使用display:table您可以 实现愿望结果

$header=@"
<style>
@charset "UTF-8"; 
table
{
font-family:Arial;font-size:1em;width:45%;margin-left:1px; margin-bottom:5px;
border-collapse:collapse;
}
td 
{
font-size:1em;text-align:center;font-family:Arial;font-weight:normal;
border:0.8px solid MignightBlue;
padding:0px 0px 0px 0px;padding-bottom:5px;
}
th 
{
font-size:1.2em;font-weight:normal;
text-align:center;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
padding-left:0px;
background-color:DarkslateGray;
color:snow;
}
name tr
{
color:#F00000;
background-color:snow;font-size:0.8em;font-family:Arial;
}
h1{
 display: table;
 padding: 0 10px;
}
</style>
"@


ConvertTo-Html -body "<H1 style=color:snow;font-weight:normal;background-color:DarkslateGray;font-size:1.5em;font-family:Arial;text-align:left;background-repeat:no-repeat;background-size:100%>
 Database Consolidated Health Check Report </H1>" |`
 Out-File  C:\Temp\ConsolidatedReport.html

Answer 2

请添加“ display：inline-block;” h1中的属性。尝试以下代码：

ConvertTo-Html -body "<H1 style=color:snow;font-weight:normal;background-color:DarkslateGray;font-size:1.5em; display: inline-block; font-family:Arial;text-align:left;background-repeat:no-repeat;background-size:100%>

数据库综合运行状况检查报告” |` 文件外C：\ Temp \ ConsolidatedReport.html

Answer 3

最简单的解决方案是在h1标签内使用span

h1 span{
background: #e3e3e3;
}

<h1><span>Database Consolidated Health Check Report</span></h1>