Question

如何使对话对话显示如下：

人1：“你好”
人2：“嗨”

我的对话用黑色和黄色着色 enter image description here

正如你所看到的，引用开始的点不匹配，所以它确实看起来很混乱，我想让它缩进一点，并且还希望名称块具有相同的宽度（这将是适用于将在对话中的所有名称，如果它是长名称或短名称无关紧要）而你在第三行看到“你”？我是否可以将其显示在报价自动开始的位置，如果可能的话？

这是我的对话：

<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标记：

     p.smallmargin {
         margin: 0px;
padding: 0px;

line-height:160%;
         }

  .dialogue1 {
               background-color: #FFB100;
            color: black;

            font-size: 15px;
            font-family: 'Arial Black'; 
     }
     .dialogue2 {
            font-weight: bold;
            font-family: 'Arial Black';
            font-size: 15px;
            color: #FFB100;
            background-color:black;
         }

         .person1 {
                 font-weight: bold;
            font-family: 'Arial Black';
            font-size: 15px;
            color: #FFB100;
            background-color:black;
           text-transform: uppercase;
             }

             .person2 {
              font-weight: bold;
            font-family: 'Arial Black';
            font-size: 15px;
            color: black;
            background-color: #FFB100;
           text-transform: uppercase;
             }

顺便说一句，我知道我可以添加 ，但这意味着我必须手动将其添加到每个对话框中，这将是一件令人厌烦的工作。

Answer 1

正如@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>

<强> CSS

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

<强> Demo fiddle

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

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


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

此

的 demo fiddle

Answer 2

你只需要充分利用css类的强大功能：D
因此，而不是对话1对话2使用类对话为每一行和类奇/偶改变颜色。然后你使用班级人而不是person1 / 2 现在你说：

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

为了避免所说文本的行返回，我认为你应该将该文本放在带有类文本的范围内，并且：

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

谢谢Ben，但我会更进一步： http://codepen.io/migswd/pen/xbfmw

Answer 3

我知道有些开发人员可能不同意我的观点并建议使用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>

CSS：

.myChat {
    /* styling the entire chat box */
}
.myChat tr td {
    /* styling font size, padding, etc */
    font-weight: bold;
    font-family: 'Arial Black';
    font-size: 15px;
    text-transform: uppercase;
}
.myChat tr.row1 td.cell1 {
    width: 150px;/* can be anything you like */
    background-color: #FFB100;
    color: black;
    /* styling the 1st cell of row1, font color, background color, etc. */
}
.myChat tr.row1 td.cell2 {
    /* styling the 2nd cell of row1, font color, background color, etc. */
    background-color: black;
    color: FFB100;
}
.myChat tr.row2 td.cell1 {
    width: 150px;/* can be anything you like */
    background-color: black;
    color: FFB100;
    /* styling the 1st cell of row2, font color, background color, etc. */
}
.myChat tr.row2 td.cell2 {
    background-color: #FFB100;
    color: black;
    /* styling the 2nd cell of row2, font color, background color, etc. */
}

Answer 4

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

，在UL LI中添加所有会话并添加css list-style-type：none，list-style-position：outside

如何使用CSS向文本行添加制表符或空格？

4 个答案: