使用范围的Facebook风格消息气泡

Question

我使用<ul>和<li>来显示类似于facebook上的消息字符串。我使用跨度，因为我只想要消息的长度具有背景颜色和边框。我试图在里面制作一个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

由于跨度是不是一个块ele包换，你应该添加此CSS规则的范围：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