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