如何根据里面的文字增加div宽度呢？

Question

我有一个用户在其中输入文本的div.但是我想根据它的文字增加它的宽度,直到最多50%的屏幕.我的CSS代码:

.messages {
   max-width:50%;
   min-width:150px;
   background: #ffeec0;
   padding:2px;
   margin:3px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   border:1px solid #ffdd7c;
}

结果:

"555"消息后面有很多空格,只有当用户输入一些文字时我才想要这个尺寸:

那么,如何根据文本大小增加div的宽度？

Answer 1

有很多方法可以达到这个目的,但恕我直言最干净的是以下几点.你的问题是盒子是"贪婪的",并试图扩展到可用的宽度.

为防止这种情况,您可以:

• 让它"漂浮:离开;"
• 但也"清楚:离开;" 防止额外的"左浮动"元素使用右侧的可用空间.

CSS成为:

.messages {
   max-width:50%;
   min-width:150px;
   background: #ffeec0;
   padding:2px;
   margin:3px;
   border-radius: 2px;
   border:1px solid #ffdd7c;
   float:  left;
   clear: left;
}

我在Liveweave上提供了完整的代码和其他解释(鼠标悬停):http://liveweave.com/DFCZFj