Question

这是一个聊天框示例，我希望span.p元素位于右侧，我还希望背景与文本一样宽：

<div id="msgWindow" class="block">
<div id="messages">
<p class="sysmsg">You're now connected with a random chat partner...</p>
<p class="sysmsg">Say Hello!</p>
<p class="msg-item"><span class="you">hi</span></p>
<p class="msg-item"><span class="you">this is a long woooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooord</span></p>
</div>
</div>

我正在尝试使用这个CSS代码：

#msgWindow{
    position: relative;
}
#messages{
    height: 350px;
    padding: 10px;
    overflow: auto;
    word-wrap: break-word;
}
#messages p{
    padding: 5px 0;
    }
.msg-item{
}
.you, .stranger{
    padding: 4px;
    color: #FFF4F4;
    font-weight: bold;
    border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    margin-right: 5px;
}
span.you{    
    display: inherit;
    margin-left: 60%;
    width: 100px;
    background-color: #555;
    text-align: right;
    word-wrap: break-word;
    direction: rtl;
}

但是换行后文本没有左对齐，并且背景也没有设置为仅文本。

这是我所谈论的演示：https://jsfiddle.net/dhb0r3k7/

任何帮助将不胜感激！

Answer 1

如果我正在阅读你的问题，你正在寻找具有左对齐文本的可变大小，右浮动文本框。你可以尝试这样的事情：

.msg-item{
  clear: both; // <-- one msg item per row
}
span.you{    
    float:right; // <-- right floated text box
    max-width: 40%; // <-- up to 40% of parent div
    text-align: left; // <-- text is left-aligned
    margin-left: 60%;
    background-color: #555;
    word-wrap: break-word;
    direction: rtl;
}

Answer 2

你提出的问题并不完全清楚，但我认为这正是你所寻找的：

在你的msgWindow div上，输入display: inline-block。在您的span.you课程中，将textAlign: right更改为textAlign: left

将背景设置为与文本一样宽，并在换行后左对齐

2 个答案: