Ajuste automático de CSS no problema de ancho COMPLETO

Question

Quiero hacerlo, el tamaño de la burbuja, se autoajusta después del texto (comentario) que está dentro del div .. Primero está el código: .bubble { font tamaño: 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; 
} 

Y la página:

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

Ahora bien, como ya he dicho, quiero que se ajuste automáticamente al texto, por lo que la "burbuja" es de alrededor de "hola, mi nombre es azzyh" ..

no le gusta como lo es ahora: http://img341.imageshack.us/img341/8303/exampleu.png Como se puede ver que va todo a la derecha + extremo izquierdo del navegador ..

Compruebe la imagen, verá que la línea (el "cuadro") donde está el texto, es demasiado grande para el texto. Quiero css para ajustar el cuadro a continuación del texto .. por lo que las "líneas" recibe todo el texto "hola mi nombre es" lo siento por mi Inglés

Ver esta imagen: http://img17.imageshack.us/img17/6057/exampleph.png El "rojo" es como quiero que sea ..

¿Cómo puedo hacer esto?

Gracias

Answer 1

div elementos son elementos de bloque que, por defecto, se extienden a lo más a la izquierda y derecha como sus bloques que contienen lo permita.

Con el fin de obtener el ancho de la div de auto-ajuste, tendrá que convertirlo a un elemento en línea, usando el mismo estilo que se pone en la p: display: inline;

cuenta que esto puede tener el efecto secundario no deseado de no forzar automáticamente cada div en una nueva línea. Sin más información, sin embargo, no estoy del todo seguro de si eso sería bueno o malo en su diseño.

Answer 2

Mueva su propiedad border

border: 1px solid #c9c2c1; 

de

.bubble blockquote {} 

en su

.bubble blockquote p {} 

y que debe poner el cuadro en el que lo desee.

Answer 3

Un problema similar que tuve fue resuelto mediante la aplicación del siguiente CSS:

display:inline-block; 

que quería un enlace a parecerse a un botón, pero no ampliar el fondo para llenar el ancho de la DIV que contiene.

admite en casi todos los navegadores, incluyendo el apoyo parcial en IE6 e IE7, pero sólo cuando el elemento tiene 'inline' como un defecto. Hay algunos alternative properties para obtener soporte para navegadores cruzados. También hay algo en Google Code for setInlineBlock, pero no lo he intentado yo mismo.