0

我正在尝试一个 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>

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

4

2 回答 2

0

我会说一个display:block会工作

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

还有一件事，因为您在通用选择器中将边距和内边距设置为 0px，(*) 没有必要在任何其他地方执行此操作，除非您想要不同的边距/内边距。

于 2012-04-08T15:59:23.440 回答
0

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

<!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>
于 2014-10-19T21:27:42.320 回答