Html 排列多个文件的内容<；p>；标签有两种方式

因此，基本上我有以下几点：

<h5 className='admin-notice'><span className={`${klass}teal`}>Teal</span> - Random Text one</h5>
<h5 className='admin-notice'><span className={`${klass}blue`}>Purple</span> - Some other random text</h5>
<h5 className='admin-notice'><span className={`${klass}red`}>Red</span> - Hey there random</h5>
<h5 className='admin-notice'><span className={`${klass}grey`}>Grey</span> - hi</h5>
<h5 className='admin-notice'><span className={`${klass}yellow`}>Yellow</span> - this is random</h5>
<h5 className='admin-notice'><span className={`${klass}green`}>Green</span> - its howdie doodie time</h5>

Teal-随机文本一
紫色-其他一些随机文本
红色-嘿，那是随机的
格雷-嗨
黄色-这是随机的
绿色-它的豪迪杜迪时间

因此，每个元素的左边都有文本，后面是一个分隔符，

-

，然后是更多的文本。我想要它，所以

-

后面的每个元素的所有文本都从同一点开始，并对齐。我该怎么做？下面是它当前外观的屏幕截图。

---

没有一种简单灵活的方法可以做到这一点。您可以使用空格，但如果您想添加更多项，那么这将不起作用

我将使用具有两列的表：

<table>
    <tr>
        <td>
            <h5 className='admin-notice'>
                <span className={`${klass}teal`}>Teal</span> - 
            </h5>    
        </td>   
        <td>
            <h5 className='admin-notice'>
                Random Text one
            </h5>
        </td>
    </tr>
    ...
</table>

水鸭
随机文本一
...

---

还可以调整每个单元格中的边距和对齐方式

td{padding:1px；text align:left；}

。有很多关于表格和其他HTML&CSS元素的信息。

您可以将span元素包装在具有固定宽度和内联块显示的p元素中。例如：

<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}teal`}>Teal</span></p>- Random Text one</h5>
<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}blue`}>Purple</span></p> - Some other random text</h5>
<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}red`}>Red</span></p> - Hey there random</h5>
<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}grey`}>Grey</span></p> - hi</h5>
<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}yellow`}>Yellow</span></p> - this is random</h5>
<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}green`}>Green</span></p> - its howdie doodie time</h5>

Teal

-Random Text one 紫色

-其他一些随机文本 红色 灰色

-hi 黄色-这是随机的 绿色

-其显示时间

---

注意：这只是一个示例，使用适合您情况的宽度。

对

span

元素使用手动宽度，并将

显示属性设置为
内联块。这应该起作用：


.alignText{
显示：内联块；
宽度：85px；
}
Teal-随机文本一
紫色-其他一些随机文本
红色-嘿，随机
格雷-嗨
黄色-这是随机的
绿色-它的howdie doodie time
为
定义一个宽度，或者获取每个宽度，然后使用javascript将所有宽度设置为最大宽度。