3

我想知道如何将 DIV 的宽度设置为跨越 div 元素中文本的大小。请注意，文本必须在 div 中，我不能将其放在跨度中，并且使用 Display:inline-block 会与我的 javascript 函数混淆。另一个问题是 DIV 元素有一个背景（请参阅飞行文本类），并且该背景跨越父元素的宽度，而不是 div 内的文本宽度。怎么做？

我的代码：

CSS：

<style>
.container{
width:910px;
height: 380px;
background: url(http://v4m.mobi/php/images/home_back.jpg) center no-repeat;

    margin:0 auto;
    color:#FFF;

    background-color: #000;
}
.flying-text{
    margin-left:-100px;
    color: #fff;
    font-size: 20px;
    height: 50px;
    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;
    text-align: left;
    vertical-align: middle;
    padding: 5px 0px;
}
</style>

HTML：

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

谢谢你

4

2 回答 2

3

几个建议：

  1. 浮动 div。例如，如果你给.flying-text元素一个float:left声明，那么它们会“收缩包装”到它们的内容。（您还需要clear:left声明来清除浮动）。

  2. 将文本包裹在一个inlineorinline-block元素（例如 a span）中，并在span. 例如<div class="flying-text active-text"><span>Text1</span></div>

于 2012-06-13T11:09:42.823 回答
2

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

保持 div 原样，并将文本包装在（语义正确的）<p>标签中。那么你的 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;
}
于 2012-06-13T11:17:51.260 回答