用2种方式排列多个<p>标签的内容

Question

所以，基本上，我有以下内容：

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

因此，每个元素的左侧都有文本，后跟一个分隔符-，然后是更多文本。我想要这样，-之后每个元素的所有文本都从同一位置开始并对齐。我该怎么做呢？以下是当前外观的屏幕截图。

Answer 1

没有简单灵活的方法可以做到这一点。您可以使用空格，但是如果您想添加更多项目，那将无法正常工作。

我将使用具有两列的表：

<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; }。 W3Schools关于表格以及其他HTML和CSS元素的信息很多。

Answer 2

您可以将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>

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

Answer 3

对span元素使用手动宽度，并将display属性设置为inline-block。这应该起作用：

.alignText {
  display: inline-block;
  width: 85px;
}

<h3><span class="alignText">Teal - </span><span>Random Text one</span></h3>
<h3><span class="alignText">Purple - </span><span>Some other random text</span></h3>
<h3><span class="alignText">Red - </span><span>Hey there random</span></h3>
<h3><span class="alignText">Grey - </span><span>hi</span></h3>
<h3><span class="alignText">Yellow - </span><span>this is random</span></h3>
<h3><span class="alignText">Green - </span><span>its howdie doodie time</span></h3>