兩個無序列表並列

我有兩個無序列表，我試圖將它們並排放置。這適用於Firefox，Safari和Chrome & IE8。但不是IE 7或兼容模式。兩個無序列表並列

這裏的標記：

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

基本上預期是：

1 3 
2 4

來源

2011-06-24 Gabe

'float：left;'they probably？（第二個留有餘量） –

IE 7不處理inline-block正常。見http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html的細節，但簡單，添加下面的樣式應用到列表：

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

來源

2011-06-24 18:30:05

你可以float他們。

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

來源

2011-06-24 18:29:49

的確如此，雖然我不太喜歡寬度：10％。此外，您必須使用clear：留在以下元素上，或者在包含兩個列表的元素上使用clearfix（Google它）。 – khel

@khel。寬度可以設置爲任何值。這只是例如。 –

在IE6/7，display: inline-block只適用於那些自然inline（例如span）元素。

塊級元素（如ul），你必須把它變成鞭狀：

參見：http://jsfiddle.net/yw8uZ/

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

我在已經進入更詳細的關於這個過去，請參閱：Inline block doesn't work in internet explorer 7, 6

來源

2011-06-24 18:30:28 thirtydot

我忘記在我的回答中提到它，但我將外部'span'改爲'div'。 'ul'不是'span'的有效子項，所以你的HTML無效。 – thirtydot

兩個無序列表並列

回答

相關問題