Question

我正在尝试一个html / css实验，其中所有格式都是使用未格式化的列表完成的（list-style-type：none）。我想要做的是能够（在任何程度上）嵌入水平列表中的垂直列表，反之亦然。到目前为止，我可以在垂直列表中嵌入一个水平列表（li ... display：inline;）并且它可以工作，但我似乎无法将垂直列表显示为在水平列表中真正垂直。

到目前为止，这是我的CSS代码：

* { margin:0; padding:0; }
body {  margin: 0px;  color:#333; }
ul.mainlist {  list-style-type:none;  margin: 0px; }
.mainlist li {  margin:0px; padding:0px;  }
ul.horizontallist {  list-style-type:none; margin: 0px;  padding:0px; }
.horizontallist li { margin:0px; padding:0px; display: inline-block; }
ul.secondlist { list-style-type:none; margin: 0px; padding:0px; }
.secondlist li { margin:0px; padding:0px;}

我的HTML：

<body>
    <ul class="mainlist">
      <li>
        <ul class="horizontallist">
          <li>
            <ul class="secondlist">
              <li>First in second vertical list.</li>
              <li>Second in second vertical list.</li>
            </ul>
          </li>
          <li>the snow in Alaska.</li>
          <li>the rain in Spain.</li>
        </ul>
      </li>
      <li>Part of Mainlist</li>
    </ul>
  </body>

到目前为止，“第二列表”并不表现为水平内的垂直列表。有任何想法吗？基本上，我希望将我的大部分网页设计作为列表列表的列表，以便我可以开始考虑使用DSL来处理它。我知道很多DSL已经存在用于html / css标记，但我想控制css方面的事情。

Answer 1

我会说display:block会起作用

.secondlist li { margin:0px; padding:0px; display:block;}

另一件事，因为你在通用选择器中设置了边距和填充为0px，（*）除了你想要一个不同的边距/填充之外，没有必要在任何其他地方进行。

Answer 2

我不确定这是不是你的意思。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {margin:0;padding:0;}
body {color:#333;}
ul.mainlist, ul.mainlist ul {list-style-type:none;}
ul.mainlist li, ul.horizontallist {display:inline-block;vertical-align:top}
ul.secondlist li {display:block}
</style>
</head>

<body>
<body>
<ul class="mainlist">
        <li>
                <ul class="horizontallist">
                        <li>
                                <ul class="secondlist">
                                        <li>First in second vertical list.</li>
                                        <li>Second in second vertical list.</li>
                                        <li>Third in second vertical list.</li>
                                </ul>
                        </li>
                        <li>the snow in Alaska.</li>
                        <li>the rain in Spain.</li>
                </ul>
        </li>
        <li>Part of Mainlist</li>
</ul>
</body>
</html>

嵌套的纵向和横向列表？

2 个答案: