Html 两个无序列表并列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6472178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two unordered list side by side
提问by Gabe
I have two unordered list and I am trying to place them side by side. This works in Firefox, Safari and Chrome & IE8. But not IE 7 or compatibility mode.
我有两个无序列表，我试图将它们并排放置。这适用于 Firefox、Safari 和 Chrome & IE8。但不是 IE 7 或兼容模式。
Here's the markup:
这是标记：
<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>
Basically the expected is:
基本上预期是：
1 3
2 4
回答by George Cummins
IE 7 doesn't deal with inline-blockproperly. See http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.htmlfor details, but in brief, add the following styles to your lists:
IE 7 处理inline-block不当。有关详细信息，请参阅http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html，但简而言之，将以下样式添加到您的列表中：
zoom:1; *display: inline; _height: 30px;
回答by thirtydot
In IE6/7, display: inline-blockonly works on elements that are naturally inline(e.g. span).
在 IE6/7 中，display: inline-block仅适用于自然元素inline（例如span）。
For block-level elements (such as ul), you have to whip it into shape:
对于块级元素（例如ul），您必须将其鞭打成形状：
See:http://jsfiddle.net/yw8uZ/
见：http : //jsfiddle.net/yw8uZ/
ul {
display: inline-block;
*display: inline;
zoom: 1
}
I've gone into more detail about this in the past, see: Inline block doesn't work in internet explorer 7, 6
过去我已经详细介绍了这一点，请参阅：内联块在 Internet Explorer 7、6 中不起作用
回答by Jason Gennaro
You could floatthem.
你可以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>
