如何设置DIV的宽度以跨越其中的文本（所以不固定） [英] How to set width of DIV to span with text inside it (so not fixed)

问题描述

我想知道如何将DIV的宽度设置为div元素中文本的大小。请注意，文本必须在div中，我不能将它放在一个范围内，并使用Display：inline-block messes和我的javascript函数。另一个问题是DIV元素有一个背景（请参阅类飞行文本），并且背景横跨父元素宽度，而不是div内的文本宽度。如何做到这一点？

我的代码：

CSS：

 < style> 
 .container {
 width：910px; 
 height：380px; 
 background：url（http://v4m.mobi/php/images/home_back.jpg）center no-repeat; 
 
保证金：0 auto; 
颜色：#FFF; 
 
 background-color：＃000; 
} 
 .flying-text {
 margin-left：-100px; 
颜色：#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保持原样，并将文本包装在（语义正确）< p> 标签。那么你的CSS就会变成：

pre $ .flying-text {
margin-left：-100px;
颜色：#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;
}


I want to know how you can set the width of a DIV to span to the size of the text in the div element. Note that the text must be in a div, I cannot put it in a span, and using Display:inline-block messes with my javascript function. The other problem is that the DIV element has a background (see classes flying-text) and that background spans with the parent element width and not the text width inside the div. How to do that?

My code:

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>​

Thank You

解决方案

you are trying to get your to fill the container's width, but you want them to be wrapping the contained text. these are two opposite behaviours.

keep the div as they are, and wrap the text in a (semantically correct) <p> tag. then your css will become:

.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的宽度以跨越其中的文本（所以不固定）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！