两个无序列表并排

Question

我有两个无序列表,我试图将它们并排放置.这适用于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

Answer 1

IE 7没有inline-block正确处理.有关详细信息,请参阅http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html,但简而言之,请将以下样式添加到列表中:

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

Answer 2

在 IE6/7 中，display: inline-block仅适用于自然元素inline（例如span）。

对于块级元素（例如ul），您必须将其鞭打成形状：

见： http : //jsfiddle.net/yw8uZ/

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

过去我已经详细介绍了这一点，请参阅：内联块在 Internet Explorer 7、6 中不起作用

Answer 3

你可以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/