¿Cómo mantengo dos divs en la misma línea?

He estado trabajando en un menú desplegable similar a suckerfish. Ahora tengo el lado desplegable funcionando, pero tengo algunas imágenes que intento poner a cada lado de los enlaces. En este momento estoy usando un div del tamaño de la imagen, luego establezco la propiedad background-image en la imagen que necesito (para que pueda cambiar usando la clase pseudo: hover).¿Cómo mantengo dos divs en la misma línea?

Aquí es el CSS que se aplica:

ul#menu3 li { 
    color: #000000; 
    float: left; 
    /*I've done a little playing around here, doesn't seem to do anything*/ 
    position: relative; 
    /*margin-bottom:-1px;*/ 

    line-height: 31px; 
    width: 10em; 
    padding: none; 
    font-weight: bold; 
    display: block; 
    vertical-align: middle; 
    background-image: url(../../images/dropdown/button-tile.gif); 
} 
.imgDivRt { 
    width: 20px; 
    height: 31px; 
    display: inline; 
    float: right; 
    vertical-align: middle; 
    background-image: url(../../images/dropdown/button-right.gif); 
} 
.imgDivLt { 
    width: 20px; 
    height: 31px; 
    display: inline; 
    float: left; 
    vertical-align: middle; 
    background-image: url(../../images/dropdown/button-left.gif); 
}

que estaba usando selectores para ahorrar un poco en tener diferentes clases, pero Internet Explorer no parece apoyarlos :(

Aquí es mi HTML que se aplica:

<li><div class="imgDivLt"></div>Option 1<div class="imgDivRt"></div> 
<ul> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a> 
     <ul> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
     </ul> 
    </li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> 
    <ul> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> </li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li> 
     </ul> 
    </li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li> 
</ul> 
</li> 
<li><div class="imgDivLt"></div>Option 2<div class="imgDivRt"></div>

no estoy seguro de si hay un fallo en mi código, o si estoy en el camino equivocado. Funciona en Firefox, Safari y Chrome, pero no en IE ni en ópera, así que no estoy seguro de si están recuperando la estupidez o qué. Idealmente, la segunda imagen flota ávidamente a la derecha en el bloque contenedor. En los navegadores de problemas, que se encuentra la siguiente línea hacia abajo (en el extremo derecho, al menos)

Fuente

2012-05-10 Riet

este tema podría ayudar :) http://stackoverflow.com/questions/1964297/split-div-into-2-columns-using-css –

Se puede usar un 'span' que es naturalmente' inline ', en lugar de un' div' que es naturalmente 'bloque'. –

Gracias por la entrada. He intentado usar 'span' y' clear: both', ¿es necesario 'clear' utilizarlo en un tipo específico de elemento? – Riet

Puede hacer dos divs en línea de esta manera:

display:inline; 
float:left;

Fuente

2012-05-10 18:55:52

Entonces ambos pueden flotar a la izquierda, no hay una regla sobre por qué no pueden. Simplemente colapsarán hacia la izquierda. Además, es importante tener en cuenta que no necesita mostrar en línea * y * flotar. – MetalFrog

¿Dónde exactamente en mi código se supone que debo poner esto? Ya se está utilizando en ambos divs, y cuando lo puse en el bloque contenedor, no funcionó como se esperaba. – Riet

@Riet, en IE11, tuve que agregar esto a cada DIV que quería en la misma línea. Agregarlo incluso al siguiente DIV externo (es decir, alrededor de los DIV que quería en la misma línea) no funcionó. (Me doy cuenta de que esta es una vieja pregunta, pero la respuesta a Riet me habría ahorrado un lío, si hubiera sido respondida en 2012). –

Para mí, esto funcionó mucho mejor, ya que didn no elimine el espacio entre elementos flotados:

display:inline-block;

En caso de que ayude a alguien más.

Fuente

2017-11-30 18:45:14

¿Cómo mantengo dos divs en la misma línea?

Respuesta

Cuestiones relacionadas