如何左对齐文本

Question

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

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

但我想将文本与对齐

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

我尝试了文本对齐并将属性对齐到跨度。

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>

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>

Answer 2

有很多方法可以做到这一点。您可以使用flexbox。

将display: flex添加到p元素中。

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>

Answer 3

有很多可能的解决方案(table、flex、text-indent等(，但只要它是有序列表，我就会使用ol和li来语义正确。您可以使用可以实现elementcounter的:before伪元素创建自己的类list-style元素。

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>

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>

Answer 5

这感觉像是一个可以通过使用网格布局修改dt/dd来实现最佳效果的解决方案。这里有一个例子：

.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>