5

バブルのサイズを変更したいのですが、div内にあるテキスト（コメント）の後に自動調整されます。最初にコードを示します。.bubble{font-size：12px; マージンボトム：0px; }

.bubble blockquote {
    margin: 0px;
    padding: 0px;
    border: 1px solid #c9c2c1;
    background-color: #000;
}
.bubble blockquote p {
    display: inline;
    margin: 0px;
    padding: 0px;
        font-size: 18px;
}

.bubble cite {
    position: absolute;
    margin: 0px;
    padding: 7px 0px 0px 15px;
    top: 5px;
    background: transparent url(b/tip.gif) no-repeat 20px 0;
    font-style: normal;
}

そしてページ：

<div class="bubble">
<blockquote>
<p>
Hello, my name is Azzyh
</p>
</blockquote>
<cite>I wrote this today</cite>
</div>

今言ったように、テキストに合わせて自動調整したいので、「バブル」は「こんにちは、私の名前はazzyh」の周りにあります。

現在の状態とは異なります：http： //img341.imageshack.us/img341/8303/exampleu.pngご覧 のとおり、すべてがブラウザの右端と左端に表示されます。

画像を確認すると、テキストがある行（「ボックス」）がテキストに対して大きすぎることがわかります。cssにテキストの後のボックスを調整してもらいたいので、「行」がテキストの周りを回ります「こんにちは私の名前は」私の英語でごめんなさい

この画像を参照してください：http： //img17.imageshack.us/img17/6057/exampleph.png 「赤」は私が望む方法です。

これどうやってするの？

ありがとう

4

3 に答える 3

6

div要素はブロックレベルの要素であり、デフォルトでは、含まれているブロックが許す限り左右に伸びます。

の幅を自動調整するには、 ：divを付けたのと同じスタイルを使用して、インライン要素に変換する必要があります。pdisplay: inline;

divこれにより、それぞれが新しい行に自動的に強制されないという意図しない副作用が発生する可能性があることに注意してください。しかし、これ以上の情報がなければ、それがあなたのレイアウトに良いのか悪いのか完全にはわかりません。

于 2010-02-25T18:28:49.993 に答える
2

私が抱えていた同様の問題は、次のCSSを適用することで解決されました。

display:inline-block;

リンクをボタンのように見せたかったのですが、含まれているDIVの幅を埋めるために背景を拡大したくありませんでした。

IE6およびIE7での部分的なサポートを含め、ほぼすべてのブラウザーでサポートされていますが、要素にデフォルトとして「インライン」がある場合のみです。クロスブラウザのサポートを得るためのいくつかの代替プロパティがあります。setInlineBlockのGoogleCodeにも何かがありますが、私はこれを自分で試していません。

于 2013-03-14T14:55:11.653 に答える
0

ボーダープロパティを移動する

border: 1px solid #c9c2c1;

から

.bubble blockquote {}

あなたに

.bubble blockquote p {}

そしてそれはあなたがそれを望む場所に箱を置くべきです。

于 2012-03-09T20:06:35.320 に答える