suspensivos - truncar texto css

botón de visualización css bootstrap en línea con texto

Question

Estoy usando twitter bootstrap.

Intento crear un botón con menú desplegable que se debe mostrar justo después de un texto.

El botón y todo se crean pero aparece en la línea siguiente en lugar de estar en la misma línea que mi texto.

Este es más o menos el código:

<h1> Some title
<div class="btn-group" xmlns="http://www.w3.org/1999/html">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> ...my menu''s...</li>
</ul>
</div>
</h1>

La etiqueta h1 no tiene un posicionamiento especial asignado. Intenté agregar un flotante: a la izquierda de la etiqueta h1, pero no funciona porque hay una clara: ambas en el css del grupo btn.

¿Qué pasa? ¡Gracias!

ACTUALIZAR:

También traté de agregar una clase .pull-right al div. Esto lo lleva a la línea derecha, pero está a la derecha de la página. No solo después del texto. Esto está muy lejos.

Answer 1

Realmente no sé cómo conseguiste ese marcado, pero aquí hay una versión funcional: ( demo en jsfiddle )

<h1> Some title
<small>
<span class="btn-group">
<button class="btn btn-mini">Edit</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">...my menus...</a></li>
</ul>
</span>
</small>
</h1>

h1 .btn-group { display: inline-block; }

Solo sugiero que use la etiqueta <small> , ya que establece algunos estilos diferentes de <h1> . Pero no es necesario para que esto funcione.