Làm cách nào để giữ hai div trên cùng một dòng?

Question

Tôi đã làm việc trên một menu thả xuống tương tự như suckerfish. Tôi đã có mặt thả xuống làm việc bây giờ, nhưng tôi có một số hình ảnh tôi đang cố gắng để đặt ở hai bên của các liên kết. Ngay bây giờ tôi đang sử dụng một div kích thước của hình ảnh, sau đó thiết lập các tài sản background-image đến hình ảnh tôi cần (để nó có thể thay đổi bằng cách sử dụng giả: lớp di chuột).

Đây là CSS Đó áp dụng:

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

Tôi đã sử dụng bộ chọn để tiết kiệm một chút trên có các lớp học khác nhau, nhưng internet explorer dường như không hỗ trợ họ :(

đây là HTML của tôi áp dụng:

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

tôi không chắc chắn nếu có một trục trặc trong mã của tôi, hoặc nếu tôi đang đi sai. Nó hoạt động trong firefox, safari, và chrome, nhưng không phải IE hoặc opera, vì vậy tôi không chắc chắn nếu họ đang làm cho ngu ngốc hoặc những gì. Lý tưởng nhất, hình ảnh thứ hai nổi tham lam bên phải trong khối chứa. Trong trình duyệt vấn đề, nó ngồi dòng tiếp theo xuống (ở phía bên phải ít nhất)

Answer 1

Bạn có thể làm cho hai divs inline theo cách này:

display:inline; 
float:left; 

Answer 2

Đối với tôi, điều này làm việc tốt hơn nhiều, vì nó didn 't loại bỏ khoảng cách giữa các mục được thả nổi:

display:inline-block; 

Trong trường hợp giúp đỡ bất kỳ ai khác.