我有名單如下：（家長裏在一個原始的，兩列，那麼子李在一列多原糖）如何在一行的兩列顯示ul列表？
列表1 ：
<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
我在這個格式想顯示 列表2
ChildList1 ChildList1
ChildList2
如何：
<!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>
教程這裏：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;
}
祝您好運！
感謝您的信息，但它不起作用 – CodeYun 2009-07-27 18:40:28
也許你只是將這些列表浮在一起？
<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>
然後，你將有你的CSS，上面寫着這樣（如果你試圖將這些名單爲800像素寬的空間，例如）：
#left-float
{
float:left;
width:400px;
}
#right-float
{
float:right;
width:400px;
}
我希望下面的是什麼您正在尋找：
.ListStyle ul li {
float: left;
margin-left: 20px;
}
.ListStyle ul li ul li {
margin: 0px 20px;
}
<!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>
你擊敗了我。 – 2009-07-27 18:44:23
你可以用css（仍然是實驗）來做到這一點。在這Mozilla's page他們展示瞭如何做到這一點。
短，這應該是在你的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;
}
您可能仍然想遵循「嚴格」文檔類型而不是過渡。如果您添加嚴格，IE將會正常運行。 – 2009-07-27 18:53:14
我明白了，但我正在一個10歲的頁面上工作。我沒有任何膽量來添加這個嚴格的。我只能嘗試使它的工作原理:) – CodeYun 2009-07-27 18:58:44