3

DIVの幅をdiv要素のテキストのサイズにまたがるように設定する方法を知りたいです。テキストはdivに含まれている必要があり、スパンに入れることはできません。また、Display：inline-blockを使用してjavascript関数を混乱させます。もう1つの問題は、DIV要素に背景があり（クラスflying-textを参照）、背景が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. inlineテキストをまたはinline-block要素（など）でラップし、span背景色をに設定しますspan。例えば<div class="flying-text active-text"><span>Text1</span></div>

于 2012-06-13T11:09:42.823 に答える
2

コンテナの幅を埋めようとしているが、含まれているテキストをラップしたい。これらは 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 に答える