Come mantenere due div sulla stessa linea?

Ho lavorato a un menu a discesa simile a suckerfish. Ora ho il lato a cascata che funziona, ma ho alcune immagini che sto cercando di mettere su entrambi i lati dei link. In questo momento sto usando un div la dimensione dell'immagine, quindi impostando la proprietà background-image sull'immagine che mi serve (in modo che possa cambiare usando la classe pseudo: hover).Come mantenere due div sulla stessa linea?

Ecco il CSS che si applica:

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); 
}

stavo usando i selettori di risparmiare un po 'di avere classi diverse, ma Internet Explorer non sembra di sostenerli :(

Qui è il mio HTML che si applica:

<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>

non sono sicuro se c'è un problema tecnico nel mio codice, o se sono sulla strada sbagliata. Funziona in firefox, safari e chrome, ma non in IE o in opera, quindi non sono sicuro se stanno recuperando la stupidità o cosa. Idealmente, la seconda immagine fluttua avidamente a destra nel blocco contenitore. Nei browser problema, si siede nella riga successiva verso il basso (all'estrema destra almeno)

fonte

2012-05-10 Riet

questo argomento potrebbe aiutare :) http://stackoverflow.com/questions/1964297/split-div-into-2-columns-using-css –

si potrebbe usare un span' che è naturalmente in linea '' ', piuttosto che un' div' che è naturalmente 'block'. –

Grazie per l'input. Ho provato a usare 'span' e' clear: both', 'clear' deve essere usato su un tipo specifico di elemento? – Riet

È possibile effettuare due div in linea in questo modo:

display:inline; 
float:left;

fonte

2012-05-10 18:55:52

Quindi entrambi possono essere spostati a sinistra, non c'è una regola sul motivo per cui non possono. Crolleranno a sinistra. Inoltre, è importante notare che non è necessario visualizzare inline * e * float. – MetalFrog

Dove esattamente nel mio codice dovrei metterlo? È già in uso su entrambi i miei div e, quando l'ho inserito nel blocco contenitore, non ha funzionato come previsto. – Riet

@Riet, in IE11, ho dovuto aggiungere questo a ciascun DIV che volevo sulla stessa linea. Aggiungendolo anche al prossimo DIV esterno (cioè, attorno al DIV che volevo sulla stessa linea) non funzionava. (Mi rendo conto che questa è una domanda vecchia, ma la risposta a Riet mi avrebbe risparmiato un po 'di confusione, se fosse stata fornita una risposta nel 2012). –

Per me, questo ha funzionato molto meglio, in quanto didn 't eliminare la spaziatura tra gli elementi galleggiavano:

display:inline-block;

Nel caso che aiuta chiunque altro.

fonte

2017-11-30 18:45:14

Come mantenere due div sulla stessa linea?

risposta

Problemi correlati