Question

我有两个无序列表，我试图将它们并排放置。这适用于Firefox，Safari和Chrome＆amp; 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
}

过去我已经详细介绍了这一点，请参阅：Inline block doesn't work in 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/

两个无序列表并排

3 个答案: