Question

我的列表如下：

<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

我想以这种格式显示:(父母li在一个原始的，两列，然后是一个列多个原始的子li）

List1 List2
ChildList1 ChildList1
ChildList2

Answer 1

这个怎么样：

<!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>

Live Example

Answer 2

此处教程：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;
}

祝你好运！

Answer 3

我希望您正在寻找以下内容：

.ListStyle ul li {
    float: left;
    margin-left: 20px;
}

.ListStyle ul li ul li {
    margin: 0px 20px;
}

Answer 4

你可以用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;
}

另一个论坛中的此post可能很有用。此site还显示了如何在IE和Opera中执行此操作。

Answer 5

也许您只是将这些列表彼此相邻？

<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（如果你试图将这些列表放到800px宽的空间中）：

#left-float
{
  float:left;
  width:400px;
}

#right-float
{
  float:right;
  width:400px;
}

Answer 6

<!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>

如何在一行中的两列中显示ul列表？

6 个答案: