CSS自动调整不全宽度问题

Question

我希望气泡的大小能够自动调整，以适应位于div内部的文本（评论）的大小。

以下是代码：

.bubble {
    font-size: 12px;
    margin-bottom: 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 “红色”是我想要的效果。。 我该怎么做？ 谢谢

- Karem

---

我真的不明白你想做什么，可以请你澄清一下你的意思吗？ - JP Silvashy

请查看图片，您会看到文本所在的行（“框”）对于文本来说太大了。我希望CSS可以在文本后调整框，以便“线条”围绕文本“hello my name is”。抱歉我的英语。 - Karem

Answer 1

元素是块级元素，默认情况下会尽可能地向左右两侧伸展到其包含块允许的范围。

为了使 div 的宽度自动调整，您需要将其转换为内联元素，使用与 p 相同的样式：display: inline;

请注意，这可能会产生意外的副作用，即不会自动强制每个 div 进入新行。但是，如果没有更多信息，我无法确定在您的布局中这是好还是坏。

- Scott Cranfill

Answer 2

我遇到过类似的问题，通过应用以下 CSS 得以解决：

display:inline-block;

我想让一个链接看起来像一个按钮，但不要扩展背景以填充包含DIV的宽度。 几乎所有浏览器都支持，包括IE6和IE7的部分支持，但仅在元素具有“inline”作为默认值时。有一些替代属性可以获得跨浏览器支持。还有一个Google Code for setInlineBlock上的内容，但我自己还没有尝试过。

- Mike Rouse

---

CSS的最佳属性之一，但不支持旧版IE。 - Losbear

IE 5.5到7版本对此有部分支持。我已更新我的回答以提供更多细节。 - Mike Rouse

Answer 3

移动您的边框属性

border: 1px solid #c9c2c1;

从

.bubble blockquote {} 

进入你的

.bubble blockquote p {}

这样就可以将框放到你想要的位置了。

- Jake Jackson