多行横幅文本未等左对齐

Question

我无法将功能区横幅上的文本内容均匀地对齐到左侧。

代码笔

我希望解决的问题：

• 第一行文本左侧似乎比第二行稍微缩进一些。
• 我还看到第二行右侧的填充比第一行更长。

我尝试过调整CSS，但似乎不太对劲。关于如何解决此对齐和填充问题有什么建议吗？目标是保持文本在两行上左对齐，在功能区中垂直对齐，并且所有边的填充相等。

这是代码：

CSS

/* Full-width image with ribbon text */

.ribbon-header-hero {
  position: relative;
  margin-bottom: 3rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ribbon-header-hero img {
  object-fit: cover;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
}

.ribbon-hero-text-blue, .ribbon-hero-text-white {
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 2%;
  max-width: 90%;
}


.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
    display: inline;
    font-size: 1.4rem; 
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 195% !important;
    text-align: left;
    padding: 7px 14px;
    vertical-align: baseline;
    text-transform: uppercase;
}

.ribbon-hero-text-blue p {
  background-color: #2774ae;
  color: #ffffff;
}

.ribbon-hero-text-white p {
    background-color: #fff;
    color: #2774ae;
}
  
 @media (min-width: 1100px) {
   .ribbon-hero-text-blue, .ribbon-hero-text-white {
     max-width: 70%;
     margin: 5%;
   }
   
   .ribbon-hero-text-blue p, .ribbon-hero-text-white p {
     font-size: 1.7rem;
       line-height: 1.85em !important;
   }
  }

@media (min-width: 1300px) {
   
   .ribbon-hero-text-blue p, .ribbon-hero-text-white p {
     font-size: 2.2rem;
       line-height: 1.75em !important;
   }
  }

<div class="ribbon-header-hero"><img role="presentation" src="https://storage.googleapis.com/assets_library/canvas-template/Banners/Banner2_students.jpg" alt="" />
    <div class="ribbon-hero-text-white">
        <p>Begin Your<br>Learning Journey</p>
    </div>
</div>

预先感谢您的帮助！

Answer 1

这是因为您在

<br>

标签中使用

<p>

标签，并且 css 间距属性没有将它们读取为两行。您应该将它们分成两个标签。这样 css 间距属性将被正确应用

/* Full-width image with ribbon text */

.ribbon-header-hero {
  position: relative;
  margin-bottom: 3rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ribbon-header-hero img {
  object-fit: cover;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
}

.ribbon-hero-text-blue, .ribbon-hero-text-white {
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 2%;
  max-width: 90%;
}


.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
    display: inline;
    font-size: 1.4rem; 
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 195% !important;
    text-align: left;
    padding: 7px 14px;
    vertical-align: baseline;
    text-transform: uppercase;
}

.ribbon-hero-text-blue p {
  background-color: #2774ae;
  color: #ffffff;
}

.ribbon-hero-text-white p {
    background-color: #fff;
    color: #2774ae;
}
  
 @media (min-width: 1100px) {
   .ribbon-hero-text-blue, .ribbon-hero-text-white {
     max-width: 70%;
     margin: 5%;
   }
   
   .ribbon-hero-text-blue p, .ribbon-hero-text-white p {
     font-size: 1.7rem;
       line-height: 1.85em !important;
   }
  }

@media (min-width: 1300px) {
   
   .ribbon-hero-text-blue p, .ribbon-hero-text-white p {
     font-size: 2.2rem;
       line-height: 1.75em !important;
   }
  }

<div class="ribbon-header-hero"><img role="presentation" src="https://storage.googleapis.com/assets_library/canvas-template/Banners/Banner2_students.jpg" alt="" />
<div class="ribbon-hero-text-white">
    <p>Begin Your</p>
    <br>
    <p>Learning Journey</p>
</div>
</div>