如何将文本左对齐？

Question

我有一个包含两个步骤的脚本，我想要对齐文本，例如：

Step1 : I am a boy........
my name is Ram```

但是我想将文本对齐为

Step1 : I am a boy........
        my name is Ram```

我尝试使用text-align和align属性来定位跨度元素。

p.steps {
  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: normal;
  font-family: 'Montserrat';
  line-height: 1.2;
  margin-top: 20px;
  text-align: left;
}

<p class="steps"> <span style="color:#BB2812">Step1 : </span> I am a boy................. my name is Ram</p>
<p class="steps"> <span style="color:#BB2812">Step2 : </span> There are many countries but I live in Australia </p>

- Muddasar Saiyed

---

请查看CSS选项text-indent。 - akaBase

更好的方法是将它们放在不同的span中并对齐它们，而不是试图这样做。因此，基本上一个span应该保留单词“step”，另一个应该保留步骤信息。这样你就可以始终获得对齐。 - user728627

@akaBase 当我们在大页面中查看内容时，它将保留单词之间的空格。 - Muddasar Saiyed

@HellBringer419 我尝试了那个，但没有成功。 - Muddasar Saiyed

将 display:flex 添加到 .steps，并将 white-space:nowrap; 添加到 span。 - AbbasEbadian

@MuddasarSaiyed 嘿，你很幸运，人们已经给出了如何作为答案的示例。感谢您的赞成票。 - user728627

Answer 1

布局可以解决这个问题。

p.steps {
  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: normal;
  font-family: 'Montserrat';
  line-height: 1.2;
  margin-top: 20px;
  text-align: left;
  display:table; /* here */
}
p.steps span {
  display:table-cell; /* here */
  white-space:nowrap; /* and here */
  padding-right:5px;
}

<p class="steps"> <span style="color:#BB2812">Step1 : </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque urna at ex fermentum egestas. Nullam convallis nec dolor finibus rhoncus. Nunc neque nisi,</p>
<p class="steps"> <span style="color:#BB2812">Step2 : </span> There are many countries but I live in Australia </p>

- Temani Afif

Answer 2

有很多方法可以实现它。你可以使用 flexbox 来做。

在 p 元素中添加 display: flex。

p.steps {
  display: flex;

  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: normal;
  font-family: 'Montserrat';
  line-height: 1.2;
  margin-top: 20px;
  text-align: left;
}

.step {
  display: block;
  
  color: #BB2812;
}

.step-content {
  flex: 1;
}

<p class="steps">
  <span class="step">Step 1:</span>

  <span class="step-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada non ex consectetur posuere. Vestibulum in leo tempus dolor pharetra ultricies.
  </span>
</p>

<p class="steps">
  <span class="step">Step 2:</span>

  <span class="step-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada non ex consectetur posuere. Vestibulum in leo tempus dolor pharetra ultricies.
  </span>
</p>

- Magiczne

Answer 3

There are a lot of possible solutions (table,flex,text-indent, etc.) but as long as it is ordered list I would use ol and li to be semantically correct. You can create your own list-style like element with :before pseudo element which can implement elementcounter.

ol {
  list-style-type: none;
  counter-reset: elementcounter;
  padding-left: 0;
}
li {
   position: relative;
   padding-left: 3.5rem;
}
li:before {
  content: "Step " counter(elementcounter) ":";
  counter-increment: elementcounter;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

<ol>
   <li>I am a boy...<br/> my name is Ram</li>
   <li>There are many countries but I live in Australia</li>
</ol>

- Jax-p

Answer 4

您可以使用简单的方法 div。

p.steps {
  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: normal;
  font-family: 'Montserrat';
  line-height: 1.2;
  margin-top: 20px;
  text-align: left;
}

<div class="steps">
  <div style="color:#BB2812;    float: left;
    width: 8%;">Step1 : </div>
  <div style="float: left;
    width: 91%;"> I am a boy................. <br>my name is Ram</div>
</div>
<div class="steps">
  <div style="color:#BB2812;    float: left;
    width: 8%;">Step2 : </div>
  <div style="float: left;
    width: 91%;">There are many countries but I live in Australia </div>
</div>

- Avinash Dalvi

Answer 5

这感觉像是通过修改 dt/dd 与 grid 布局来实现最佳的解决方案。以下是一个示例：

.steps {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5em 0;
  
  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: normal;
  font-family: 'Montserrat';
  line-height: 1.2;
  margin-top: 20px;
  text-align: left;
}
.steps dt {
  color: #BB2812;
}
.steps dt::after {
  content: ' : ';
}

<dl class="steps">
  <dt>Step 1</dt>
  <dd>I am a boy.................<br>my name is Ram</dd>
  <dt>Step 2</dt>
  <dd>There are many countries but I live in Australia</dd>
</dl>

- Jens Ingels