两个无序列表并排答案

【问题标题】：Two unordered list side by side两个无序列表并排
【发布时间】：2011-09-22 06:21:56
【问题描述】：

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

【问题讨论】：

float:left; 他们可能吗？（第二个有左边距）

标签： html css internet-explorer

【解决方案1】：

在 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

【讨论】：

我忘了在我的回答中提及它，但我将您的外部span 更改为div。 ul 不是 span 的有效子代，因此您的 HTML 无效。

【解决方案2】：

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

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

【讨论】：

【解决方案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/

【讨论】：

没错，虽然我不太喜欢宽度：10%。此外，您必须在以下元素上使用 clear:left 或在包含两个列表的元素上使用 clearfix (google it)。
@khel。宽度可以任意设置。这只是一个例子。
当左侧列表的项目多于右侧列表时。右侧列表不是从顶部开始或顶部与左侧不对齐。有什么解决办法吗？