html - 使用 span 的 Facebook 风格消息气泡

Question

我正在使用 <ul>与 <li>在 facebook 上显示一串消息。我正在使用跨度，因为我只希望消息的长度具有背景颜色和边框。我尝试在 li 中创建一个宽度为 auto 的 div 并使用 <p>标签来实现这一点，但到目前为止只有 span 正在这样做。然而，随着换行时的跨度，它看起来像这样:

HTML

<ul>    
    <li class = "msg_list" data-soyid = "{{$message->user_id}}">
        <div style = "width: auto" class = "fl_bx">
           <section>
                <span>
                        {{$message->body}}
                </span>
            </section>
        </div>
    </li>
</ul>

CSS

.msg_list{
    margin-top: 5px;
    margin-bottom: 10px;
}
.msg_list span{
    padding: 3px;
    background: beige;
    border-radius: 5px;
    border: 1px solid black;
}

.user_chat{
    text-align: right;
}
.response_chat{
    text-align: left;
}

Answer 1

因为 span 不是 block 元素，所以您应该将此 CSS 规则添加到您的 span 中:display:inline-block;

在这里试试:

.msg_list{
    margin-top: 5px;
    margin-bottom: 10px;
}
.msg_list .msg{
    padding: 3px;
    background: beige;
    border-radius: 5px;
    border: 1px solid black;
    display: inline-block;
    
}


.user_chat{
    text-align: right;
}
.response_chat{
    text-align: left;
}

<ul>    
<li class = "msg_list" data-soyid = "{{$message->user_id}}">
        <div style = "width: auto" class = "fl_bx">
           <section>
                <span class="msg">
                        very looooooooooooooooooooooooooong line.
                </span>
            </section>
        </div>
    </li>
</ul>

您可以轻松更改容器宽度并在此 fiddle 中使用它