向左添加填充以流动 html：文本不移动
[英]adding padding left to flow html: text not shifting
问题描述
我在电源自动化中使用 HTML 并使用左填充 function 尝试将标签向右移动。
但是它不起作用。 下面是代码。
<html>
<style>
.email-container2{
border: 3px solid gray;
}
span.name { color:blue
}
.bottom-border{
border-bottom: 30px solid blue;
}
.bottom-border1{
border-bottom: 3px solid gray;
}
.underline{
text-decoration-line: underline;
text-decoration-color: blue;
}
.email-container1 {
border: 3px solid gray;
}
.right{
margin-left: 80%;
text-align: right;
}
p.x1 {
padding-left:10%;
}
p.x2 {
}
p.x3 {
;
}
p.x4 {
text-align: right;
}
p.x5{
}
.img-container {
text-align: left;
height="20";
width="20";
}
.img-container1 {
text-align: right;
width="100";
}
</style>
<head>
</head>
<body >
<div class = "email-container" >
<div class = "bottom-border">
<div class = "bottom-border1">
<div class ="content">
<div class="row" style="width:100%">
<div class= "img-container" style="width:50%">
<img src= https://careers.electronicsforu.com/wp-content/uploads/2016/11/tata-steel-logo.jpg alt="Airplane" >
</div>
<div class="img-container1" style="width:50%">
<img src= https://privatecdn.sharepointonline.com/tslin.sharepoint.com/sites/BoardingPass-Aviation/SiteAssets/SitePages/BoardingPass-Aviation/82731TataSteel_Aviation.jpg >
</div>
</div>
<br />
<div>
<div class = "email-container1" style="background-color:powderblue;">
<h4 align="center">
TATA STEEL AVIATION SERVICES</h2>
<h2 style="color:blue" align="center"> Boarding Pass</h2>
<p class ="x5" style="font-size:28px" ;> Date: <u><strong><span class="name">@{items('Apply_to_each')?['Date']}</span></strong></u></p>
<p class ="x1" style="font-size:28px">Name: <u class="underline"><strong><span class="name">@{items('Apply_to_each')?['Name1']}</span></strong></u></p>
<p class ="x2" style="font-size:28px">Aircraft Regn: <u class="underline"><strong><span class="name">@{items('Apply_to_each')?['AircraftRegn']?['Value']}</span></strong></u></p>
<p class ="x3" style="font-size:28px">Sector: <u class="underline"><strong><span class="name">@{items('Apply_to_each')?['Sector']}</strong></span></u></p>
<p class ="x4" style="font-size:22px" >Signature: <u ><strong><span class="name">@{items('Apply_to_each')?['Signature']}</span></strong></u></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我尝试 margin-left 并且它有效，但是在使用 margin-left 时，背景颜色变为白色。 我如何在这里使用 padding-left 做同样的事情。
这是我使用左边距时的图像：
这是我使用 padding-left 时的图像
2 个解决方案
解决方案1
1 2020-08-07 13:21:43
.email-container2 { border: 3px solid gray; } span.name { color: blue; text-align:left; }.bottom-border { border-bottom: 30px solid blue; }.bottom-border1 { border-bottom: 3px solid gray; }.underline { text-decoration-line: underline; text-decoration-color: blue; color: blue; text-align:left; }.email-container1 { border: 3px solid gray; }.table td, .table th{ border:none;important: font-size.28px }:right { margin-left; 80%: text-align; right. }:pl-10 { padding-left; 10%. }:img-container { text-align; left; height="20"; width="20". }:img-container1 { text-align; right; width="100"; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <body> <div class="email-container"> <div class="bottom-border"> <div class="bottom-border1"> <div class="content"> <div class="row" style="width:100%"> <div class="img-container" style="width:50%"> <img src=https://careers.electronicsforu.com/wp-content/uploads/2016/11/tata-steel-logo.jpg alt="Airplane"> </div> <div class="img-container1" style="width:50%"> <img src=https://privatecdn.sharepointonline.com/tslin.sharepoint.com/sites/BoardingPass-Aviation/SiteAssets/SitePages/BoardingPass-Aviation/82731TataSteel_Aviation.jpg> </div> </div> <br /> <div class="table table-responsive email-container1 w-100 pl-10" style="background-color:powderblue;"> <h2 style="color:blue" align="center">Boarding Pass</h2> <table classs="border-0"> <tbody> <tr> <td class="w-50">Date:</td> <td class="underline w-50">2020-08-11</td> </tr> <tr> <td>Name:</td> <td class="underline">Sandeep</td> </tr> <tr> <td>Aircraft Regn:</td> <td class="underline">VT-TFA</td> </tr> <tr> <td>Sector:</td> <td class="underline">NoiDa</td> </tr> <tr> <td>Signature:</td> <td class="underline">ssp</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </body>
请使用HTML 表并避免
解决方案2
0 2020-08-07 12:46:13
只需用 div 包装所有 p.xN 元素，这些元素将具有 class 例如“move_right”将具有padding-left: 10%;
我希望这是你想要的。
包含代码。
<html>
<style>
.email-container2 {
border: 3px solid gray;
}
span.name {
color: blue
}
.bottom-border {
border-bottom: 30px solid blue;
}
.bottom-border1 {
border-bottom: 3px solid gray;
}
.underline {
text-decoration-line: underline;
text-decoration-color: blue;
}
.email-container1 {
border: 3px solid gray;
}
.right {
margin-left: 80%;
text-align: right;
}
.move_left {
padding-left: 10%;
}
p.x1 {
}
p.x2 {}
p.x3 {
;
}
p.x4 {
text-align: right;
}
p.x5 {}
.img-container {
text-align: left;
height="20";
width="20";
}
.img-container1 {
text-align: right;
width="100";
}
</style>
<head>
</head>
<body>
<div class="email-container">
<div class="bottom-border">
<div class="bottom-border1">
<div class="content">
<div class="row" style="width:100%">
<div class="img-container" style="width:50%">
<img src=https://careers.electronicsforu.com/wp-content/uploads/2016/11/tata-steel-logo.jpg alt="Airplane">
</div>
<div class="img-container1" style="width:50%">
<img src=https://privatecdn.sharepointonline.com/tslin.sharepoint.com/sites/BoardingPass-Aviation/SiteAssets/SitePages/BoardingPass-Aviation/82731TataSteel_Aviation.jpg>
</div>
</div>
<br />
<div>
<div class="email-container1" style="background-color:powderblue;">
<h4 align="center">
TATA STEEL AVIATION SERVICES</h2>
<h2 style="color:blue" align="center"> Boarding Pass</h2>
<div class="move_left">
<p class="x5" style="font-size:28px" ;> Date: <u><strong><span class="name">@{items('Apply_to_each')?['Date']}</span></strong></u></p>
<p class="x1" style="font-size:28px">Name: <u class="underline"><strong><span class="name">@{items('Apply_to_each')?['Name1']}</span></strong></u></p>
<p class="x2" style="font-size:28px">Aircraft Regn: <u class="underline"><strong><span class="name">@{items('Apply_to_each')?['AircraftRegn']?['Value']}</span></strong></u></p>
<p class="x3" style="font-size:28px">Sector: <u class="underline"><strong><span class="name">@{items('Apply_to_each')?['Sector']}</strong></span></u></p>
<p class="x4" style="font-size:22px">Signature: <u><strong><span class="name">@{items('Apply_to_each')?['Signature']}</span></strong></u></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML email - Outlook 在图像左侧和顶部添加 1px 填充（PNG / 背景色）
[英]HTML email - Outlook adding 1px padding left and top of images (PNG / background color)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.