使用範圍的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