Hai danh sách không có thứ tự cạnh nhau

Question

Tôi có hai danh sách không có thứ tự và tôi đang cố gắng đặt chúng cạnh nhau. Tính năng này hoạt động trong Firefox, Safari và Chrome & IE8. Nhưng không phải IE 7 hoặc chế độ tương thích.

Dưới đây là đánh dấu:

<span> 
    <ul style="list-style-type: none; display: inline-block;"> 
     <li>1</li> 
     <li>2</li> 
    </ul> 

    <ul style="list-style-type: none; display: inline-block;"> 
     <li>3</li> 
     <li>4</li> 
    </ul> 
<span> 

Về cơ bản dự kiến ​​là:

1 3 
2 4 

Answer 1

IE 7 không đối phó với inline-block đúng cách. Xem http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html để biết chi tiết, nhưng trong ngắn gọn, thêm phong cách sau đây vào danh sách của bạn:

zoom:1; *display: inline; _height: 30px; 

Answer 2

Bạn có thể float họ.

<ul style="width:10%; float:left;"> 
     <li>1</li> 
     <li>2</li> 
    </ul> 

    <ul style="width:10%; float:left;"> 
     <li>3</li> 
     <li>4</li> 
    </ul> 

http://jsfiddle.net/jasongennaro/K3xcg/

Answer 3

Trong IE6/7, display: inline-block chỉ hoạt động trên các yếu tố đó là một cách tự nhiên inline (ví dụ span).

Đối với yếu tố khối cấp (ví dụ như ul), bạn phải whip nó thành hình dạng:

Xem:http://jsfiddle.net/yw8uZ/

ul { 
    display: inline-block; 
    *display: inline; 
    zoom: 1 
} 

Tôi đã đi vào chi tiết hơn về vấn đề này trong trước đây, xem: Inline block doesn't work in internet explorer 7, 6