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

Самое простое решение - использовать span внутри тега h1

h1 span{
background: #e3e3e3;
}

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

Answer 3

Пожалуйста, добавьте "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%>

Отчет о проверке консолидированной работоспособности базы данных "|` Out-File C: \ Temp \ ConsolidatedReport. html