Aynı satırda iki div nasıl saklarım?

Question

Suckerfish benzeri bir açılan menü üzerinde çalışıyorum. Şu an açılan tarafım var ama bağlantıların her iki tarafına koymaya çalıştığım bazı imgelerim var. Şu anda görüntünün boyutunu bir div kullanıyorum ve background-image özelliğini ihtiyacım olan görüntüye ayarlıyorum (böylece sözde: hover sınıfını kullanarak değişebilir). İşte

geçerlidir CSS:

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

farklı sınıflar sahip biraz kurtarmak için seçiciler kullanıyordu, ama internet explorer İşte bunları :(

desteklemek için görünmüyor

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

benim kodda bir hata var olmadığından emin değilim, ya da ben yanlış yolda kalırsam: uygular benim HTML. It firefox, safari ve krom çalışır, ancak IE veya opera, bu yüzden onlar aptallık ya da ne için yapıyorlar emin değilim. İdeal olarak, ikinci görüntü ihtiva eden blokta açgözlülükle sağa doğru yüzer. Sorun tarayıcılarda, aşağı

Answer 1

(sağında en azından) Satır içi bu şekilde iki div'leri yapabilir sonraki satırı oturur: bu değil mi olarak benim için

display:inline; 
float:left; 

Answer 2

, bu, çok daha iyi çalıştı Yüzen öğeler arasındaki boşlukları ortadan kaldırmak için:

display:inline-block; 

Başkalarına yardımcı olması durumunda.