这是一个聊天框示例,我希望 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/
如有任何帮助,我们将不胜感激!
最佳答案
如果我没看错您的问题,那么您正在寻找具有可变大小、右浮动文本框和左对齐文本的文本框。你可以尝试这样的事情:
.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;
}
关于html - 将背景设置为与文本一样宽,并在换行后左对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41385904/