html - 向左添加填充以流动 html：文本不移动

Question

我在电源自动化中使用 HTML，并且正在使用填充左函数来尝试将标签向右移动。

但是它不起作用。下面是代码。

<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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <u><strong><span class="name">@{items('Apply_to_each')?['Date']}</span></strong></u></p>
                <p  class ="x1" style="font-size:28px">Name: &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <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: &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<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: &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <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 时的图像

score 1 · Accepted Answer

  .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 表格并避免 

score 0 · Accepted Answer

只需用 div 包装所有 p.xN 元素，这些元素将具有类，例如“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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <u><strong><span class="name">@{items('Apply_to_each')?['Date']}</span></strong></u></p>
                  <p class="x1" style="font-size:28px">Name: &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <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: &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<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: &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <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 - 向左添加填充以流动 html：文本不移动

2 回答 2

Related

Reference