Como faço para manter dois divs na mesma linha?
Eu tenho trabalhado em um menu suspenso semelhante ao suckerfish. Eu tenho o lado dropdown trabalhando agora, mas eu tenho algumas imagens que estou tentando colocar em ambos os lados dos links. Agora eu estou usando um div o tamanho da imagem, em seguida, definindo obackground-image
propriedade para a imagem que eu preciso (para que ele possa mudar usando a classe pseudo: hover).
Aqui está o CSS que se aplica:
<code>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); } </code>
Eu estava usando seletores para economizar um pouco em ter classes diferentes, mas o Internet Explorer não parece apoiá-los :(
Aqui está o meu HTML que se aplica:
<code><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> </code>
Não tenho certeza se há uma falha no meu código ou se estou no caminho errado. Ele funciona no firefox, safari e chrome, mas não no IE ou ópera, então não tenho certeza se eles estão compensando a estupidez ou o quê. Idealmente, a segunda imagem flutua avidamente para a direita no bloco de contenção. Nos navegadores com problemas, ele fica na próxima linha (na extremidade à direita, pelo menos)