Html 如何在一行中的两列中显示ul列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1189833/
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
How to display ul list in two columns in one row?
提问by CodeYun
I have the list as below:
我有以下清单：
<div class="ListStyle">
<ul>
<li>List1
<ul>
<li>ChildList1</li>
<li>ChildList2</li>
</ul>
</li>
<li>List2
<ul>
<li>ChildList1</li>
</ul>
</li>
</ul>
</div
i wanna display in this format: (Parent li in one raw, two columns, then child li in one column multi raws)
我想以这种格式显示：（父 li 在一列原始，两列中，然后子 li 在一列多原始中）
List1 List2
ChildList1 ChildList1
ChildList2
List1 List2
ChildList1 ChildList1
ChildList2
回答by Paolo Bergantino
How about this:
这个怎么样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
* { margin: 0; padding: 0; }
.ListStyle ul li {
float: left;
list-style-type: none;
}
.ListStyle ul li ul li {
float: none;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="ListStyle">
<ul>
<li>List1
<ul>
<li>ChildList1</li>
<li>ChildList2</li>
</ul>
</li>
<li>List2
<ul>
<li>ChildList1</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
现场示例。
回答by Christian Vielma
You can do it with css (still experimental). In this Mozilla's pagethey show how to do it.
你可以用 css ( 仍然是实验性的) 来做到这一点。在这个Mozilla 的页面中，他们展示了如何做到这一点。
To be short, this should be in your css:
简而言之，这应该在您的 css 中：
ul
{
columns: 2 12em; /* two columns, each 12em width */
column-gap: 1em; /* spacing between columns */
column-rule: 1px dashed silver; /* border between columns */
-moz-columns: 2 12em; /* for Gecko */
-moz-column-gap: 1em;
-moz-column-rule: 1px dashed silver;
-webkit-columns: 2 12em; /* for WebKit */
-webkit-column-gap: 1em;
-webkit-column-rule: 1px dashed silver;
}
This postin another forum may be useful. Also this siteshows how to do it in IE and Opera.
回答by Petrogad
Tutorial Here: http://css.maxdesign.com.au/listutorial/horizontal_master.htm
教程在这里：http: //css.maxdesign.com.au/listutorial/horizontal_master.htm
.yourElement ul li { display: inline; }
.yourElement ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
Good Luck!
祝你好运！
回答by Alan Haggai Alavi
I hope the following is what you are looking for:
我希望以下是您正在寻找的内容：
.ListStyle ul li {
float: left;
margin-left: 20px;
}
.ListStyle ul li ul li {
margin: 0px 20px;
}
回答by Jaime Garcia
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<style type="text/css">
div.ListStyle>ul {
list-style-type: none;
}
div.ListStyle>ul>li {
display:inline;
}
div.ListStyle>ul>li>div {
float: left;
}
div.clear {
clear: both;
}
</style>
<body>
<div class="ListStyle">
<ul>
<li>
<div>
List1
<ul>
<li>ChildList1</li>
<li>ChildList2</li>
</ul>
</div>
</li>
<li><div>
List2
<ul>
<li>ChildList1</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</body>
回答by Popmatic
Perhaps you would just float these lists next to one another?
也许您会将这些列表并排放置？
<div id="left-float">
<ul>
<li>List1</li>
<li><ul>
<li>ChildList1</li>
<li>ChildList2</li>
<ul></li>
</ul>
</div>
<div id="right-float">
<ul>
<li>List2</li>
<li><ul>
<li>ChildList1</li>
<ul></li>
</ul>
</div>
And then you would have your css that reads like this (if you were trying to fit these lists into a space 800px wide, for instance):
然后你的 css 会是这样的（例如，如果你试图将这些列表放入一个 800px 宽的空间中）：
#left-float
{
float:left;
width:400px;
}
#right-float
{
float:right;
width:400px;
}
