写一个左右的聊天框
基础版本（大部分都是这么写的）：
image.png
<ul>
<li class="left">
<span>这是一个左侧的长文本这是一个左侧的长文本这是一个左侧的长文本这是一个左</span>
</li>
<li class="right">
<span>这是一个右侧的长文本这是一个右侧的长文本这是一个右侧的长文本这是一个右</span>
</li>
<li class="left">
<span>这是一个左侧的短文本这</span>
</li>
<li class="right">
<span>这是一个右侧的短文本这</span>
</li>
</ul>
html,
body {
padding: 0;
margin: 0;
}
ul {
list-style: none;
padding: 20px;
margin: 0;
font-size: 14px;
line-height: 20px;
}
li.left {
margin-right: 20px;
}
li.left span {
display: inline-block;
border-radius: 0 15px 15px;
background-color: rgba(0, 0, 0, 0.1);
padding: 10px 15px;
}
li.right {
margin-left: 20px;
text-align: right;
}
li.right span {
display: inline-block;
border-radius: 15px 0 15px 15px;
background-color: rgba(0, 0, 0, 0.1);
padding: 10px 15px;
}
li+li {
margin-top: 20px;
}
image.png
增加以下样式使内容左对齐；
li.right span {
text-align: left;
}
justify 版本：
由于汉字较宽，很容易出现显示效果上的最右padding看起来比左侧padding大的样子。
这个时候，就很容易想到使用text-align: justify。
增加以下样式
li.left {
text-align: justify;
}
li.right span{
text-align: justify;
}
image.png
如果需要右侧文本居右对齐：
再次增加
li.right span{
direction: rtl;
}
image.png
看起来挺简单的，全看需求想要什么样的，有两个重点：一是内容是否需要左右对齐(justify)；二是右侧的聊天框内容，不足一行时左对齐还是右对齐(direction)。
其实写这文章，也只是在测试，如何让右侧的聊天框内容在justify的同时保证右对齐，因为text-align的justify和right只能生效一个，后来找到了css的direction。
另外再说一句，很多人写样式，都喜欢用百分比来限制或者区分左右窗口，其实我用css的margin-left和margin-right也控制的不错。保持左右的边距一致即可。
