Html 如何将DIV的宽度设置为包含文本的范围（因此不是固定的）

我想知道如何将DIV的宽度设置为DIV元素中文本的大小。请注意，文本必须在div中，我不能将其放在span中，使用Display:inline block会弄乱javascript函数。另一个问题是DIV元素有一个背景（请参见文本），背景与父元素宽度而不是DIV内的文本宽度有关。如何做到这一点

我的代码：

CSS:

.集装箱{
宽度：910px；
高度：380px；
背景：url(http://v4m.mobi/php/images/home_back.jpg)中心不重复；
保证金：0自动；
颜色：#FFF；
背景色：#000；
}
.飞行文字{
左边距：-100px；
颜色：#fff；
字体大小：20px；
高度：50px；
背景：rgba（0,0,0,0.5）；
-webkit边界半径：0px 10px 10px 10px；
边界半径：0px 10px 10px 0px；
-moz边界半径：0px 10px 10px 0px；
文本对齐：左对齐；
垂直对齐：中间对齐；
填充：5px0px；
}

HTML:

文本1
文本2
文本3
​

---

谢谢你

有几点建议：

让潜水艇浮起来。e、 g.如果您给

.flying text

元素一个

float:left

声明，那么它们将对其内容进行“收缩包装”。（您还需要一个

clear:left

声明来清除浮动）

将文本包装在

内联

或

内联块

元素（例如

span

）中，并在

span

上设置背景色。e、 g.

Text1

---

您正试图让您的应用程序填充容器的宽度，但希望它们包装包含的文本。这是两种相反的行为

保持div的原样，并将文本包装在一个（语义正确的）

标记中。然后，您的css将变成：

.flying-text{
    margin-left:-100px;
    color: #fff;
    font-size: 20px;
    height: 50px;
    text-align: left;
    vertical-align: middle;
    padding: 5px 0px;
}

.flying-text p {
    float: left;
    background: rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 0px 10px 10px 10px;
    border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
}

---

请提供所需的屏幕截图是的，您还需要清除，以便分区一个坐在另一个下面！对不起，我忘记指定了

<div class="container">
  <div class="flying-text active-text">Text1</div>                        
  <div class="flying-text">Text2</div>                        
  <div class="flying-text">Text3</div>                      
</div>​

.flying-text{
    margin-left:-100px;
    color: #fff;
    font-size: 20px;
    height: 50px;
    text-align: left;
    vertical-align: middle;
    padding: 5px 0px;
}

.flying-text p {
    float: left;
    background: rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 0px 10px 10px 10px;
    border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
}