使用范围的Facebook样式消息泡影

Question

我正在使用<ul> <li>来显示Facebook上的一连串消息。我正在使用span，因为我只希望消息的长度具有背景颜色和边框。我试图在li中创建一个div，其宽度为auto，并使用<p>标签来实现这一目标，但到目前为止只有跨度。但是，当换行时的跨度看起来像这样：

的 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不是块元素，因此您应该将此CSS规则添加到您的范围：display:inline-block;

在这里试试：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您可以轻松更改容器宽度并在此fiddle

中使用它