Html 如何使用CSS向文本行添加选项卡或空格？

我如何使对话显示如下：

<table class="myChat">
    <tr class="row1">
        <td class="cell1">Username1</td>
        <td class="cell2">text of username1</td>
    </tr>
    <tr class="row2">
        <td class="cell1">Username2</td>
        <td class="cell2">text of username2</td>
    </tr>
    <tr class="row1">
        <td class="cell1">Username3</td>
        <td class="cell2">text of username3</td>
    </tr>
</table>

人1：“你好”
第二个人：“嗨”

我把我的对话涂成黑色和黄色

正如您所看到的，引号的起始点不匹配，因此这样看起来确实很混乱，我想让它缩进一点，并且还希望名称块具有相同的宽度（这将应用于对话中的所有名称，无论是长名称还是短名称） 你看到第三行的“你”了吗？如果可能的话，我可以让它出现在报价自动开始的点下方吗

以下是我的对话：

<p class="smallmargin"><span> <span class="dialogue1"><span class="person1">Harvey: </span>&nbsp; "What are your choices when someone puts a gun to your head?"</span> <span class="dialogue2"></span></span><br /> 
<span class="dialogue2"><span class="person2">Mike: </span>&nbsp; "What are you talking about? You do what they say or they shoot you." </span> <br /> 
<span class="dialogue1"><span class="person1">Harvey: </span>&nbsp; "Wrong. You take the gun, or you pull out a bigger one. Or, you call their bluff. Or, you do any one of a hundred and forty six other things."</span></p>

---

顺便说一句，我知道我可以添加

，但这意味着我必须手动将其添加到每个对话中，这将是一项烦人的工作。

您只需充分利用css类的功能：D
因此，不是dialogue1 dialogue2，而是对每行使用类对话，并使用奇数/偶数类来更改颜色。然后使用类person而不是person1/2。
现在你说：

.dialogue .person { display: inline-block; width: 30px; }

为了避免所说文本的换行，我认为您应该将该文本与类文本放在一个范围内，并且：

.dialogue .text { display: table-cell; }

谢谢你，本，但我会更进一步：

---

我知道一些开发人员可能不同意我的意见，建议使用CSS的

div

或

span

标记，但我会使用

table

标记，如下所示：

<table class="myChat">
    <tr class="row1">
        <td class="cell1">Username1</td>
        <td class="cell2">text of username1</td>
    </tr>
    <tr class="row2">
        <td class="cell1">Username2</td>
        <td class="cell2">text of username2</td>
    </tr>
    <tr class="row1">
        <td class="cell1">Username3</td>
        <td class="cell2">text of username3</td>
    </tr>
</table>

---

生成此类设置的最佳方法是通过

，在UL li中添加所有对话，并添加css列表样式类型：无，列表样式位置：外部

正如@Mig建议的那样，您应该重构类，以便可以在不复制css代码的情况下为对话和名称设置常见样式

现在，对于布局，您可以使用CSS

display:table row

和

table cell

获得没有实际HTML表的表结构：

HTML

<span class="dialogue one">
    <span class="person">Harvey:</span>
    <span class="text">"What are your choices when someone puts a gun to your head?"</span>
</span>

您还可以使用内联块以及填充和负边距的组合：

.dialogue{
    display: inline-block;
    padding-left: 100px;
}


.person{
    width: 100px;
    margin-left: -100px;
    display: inline-block;
}

---

这是我为这个

做的一支笔：它不使用奇偶类（我以前在采访中试过这个，当一个人讲两段时就会出错）。我会在主线上使用.harvey或.mike类，这样当.louis出现时，事情不会完全出错。在人名上设置固定宽度是任意的，甚至不起作用，因为元素是内联元素。对，你应该看看我的代码笔，它是最终版本。对不起，我忘了更新以前的文本@Jukka K.Korpelaset为第一列设置固定宽度几乎会破坏使用表的好处。问题的标题具有误导性：您不想添加空格或制表符，而是希望事物对齐。由于HTML中存在多个空格规则，添加空格或制表符甚至都没有帮助。这是一个不错的解决方案！但是这个解决方案对于Opera 9和IE6/7这样的旧浏览器不太适用，因为“display:inline block；”不受支持，除非您不关心跨浏览器兼容性，这不会有问题。参考：

.dialogue{
    display: table-row;
}
.text, .person {
    display: table-cell;
}

.dialogue{
    display: inline-block;
    padding-left: 100px;
}


.person{
    width: 100px;
    margin-left: -100px;
    display: inline-block;
}