Html 如何将文本左对齐？

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

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

但我想将文本对齐为

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

我尝试将文本对齐和对齐属性设置为span

p.steps{
颜色：#000；
边缘底部：10px；
字体大小：20px；
字体大小：正常；
字体系列：“蒙特塞拉特”；
线高：1.2；
边缘顶部：20px；
文本对齐：左对齐；
}

第1步：我是个男孩。。。。。。。。。。。。。。。。。我叫拉姆
第二步：有很多国家，但我住在澳大利亚

p.steps{
颜色：#000；
边缘底部：10px；
字体大小：20px；
字体大小：正常；
字体系列：“蒙特塞拉特”；
线高：1.2；
边缘顶部：20px；
文本对齐：左对齐；
显示：表格；/*此处*/
}
p、 台阶跨度{
显示：表格单元格；/*此处*/
空白：nowrap；/*和此处*/
右侧填充：5px；
}
第1步：学习知识，学习精英。我们在egestas前发酵厂生产佩伦特斯克尔纳啤酒。这是一个很好的例子。努克·奈克·尼西
第二步：有很多国家，但我住在澳大利亚
简单的方法你可以使用
div


p.steps{
颜色：#000；
边缘底部：10px；
字体大小：20px；
字体大小：正常；
字体系列：“蒙特塞拉特”；
线高：1.2；
边缘顶部：20px；
文本对齐：左对齐；
}

步骤1：
我是一个男孩<我的名字叫拉姆
步骤2：
有很多国家，但我住在澳大利亚
有很多方法可以做到这一点。您可以使用flexbox来完成

将
display:flex
添加到
p
元素


p.steps{
显示器：flex；
颜色：#000；
边缘底部：10px；
字体大小：20px；
字体大小：正常；
字体系列：“蒙特塞拉特”；
线高：1.2；
边缘顶部：20px；
文本对齐：左对齐；
}
.步骤{
显示：块；
颜色：#BB2812；
}
.步骤内容{
弹性：1；
}

步骤1：
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·马莱苏阿达非前圣徒。狮子座的前庭。


步骤2：
Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比·马莱苏阿达非前圣徒。狮子座的前庭。
有很多可能的解决方案（
表格
，
flex
，
文本缩进
，等等），但只要它是有序列表，我就会使用
ol
和
li
来进行语义正确的。您可以使用
：before
伪元素创建自己的
列表样式
类似元素，该伪元素可以实现
元素计数器
。
ol{
列表样式类型：无；
计数器复位：elementcounter；
左侧填充：0；
}
李{
位置：相对位置；
左侧填充：3.5雷姆；
}
李：以前{
内容：“步骤“计数器（elementcounter）”：”；
计数器增量：elementcounter；
字体大小：粗体；
位置：绝对位置；
左：0；
排名：0；
}

我是一个男孩…
我的名字叫拉姆
有很多国家，但我住在澳大利亚
这感觉像是一个解决方案，通过使用网格布局修改dt/dd可以获得最佳效果。下面是一个例子：


。步骤{
显示：网格；
网格模板列：自动1fr；
网格间距：0.5em0；
颜色：#000；
边缘底部：10px；
字体大小：20px；
字体大小：正常；
字体系列：“蒙特塞拉特”；
线高：1.2；
边缘顶部：20px；
文本对齐：左对齐；
}
.步骤dt{
颜色：#BB2812；
}
.步骤dt：：之后{
内容:'：'；
}

第一步
我是一个男孩，我的名字叫拉姆
步骤2
有很多国家，但我住在澳大利亚
查看CSS选项
文本缩进
更好的方法是将它们放在不同的跨距中并对齐，而不是尝试这样做。因此，基本上一个跨度应该保留单词“step”，另一个跨度应该保留step的信息。这样，您将获得一致的对齐方式。@akaBase当我们在大页面中看到内容时，它将保留到单词之间的空格。@HellBringer419我尝试过，但没有成功。将
display:flex
添加到
。步骤
和
空白：nowrap至
span