javascript - 无法在html中创建列表

Question

我使用 skrollr 制作了一个带有视差滚动的网页，但是当我将一个无序列表(它在另一个页面中工作，不包含 skrollr)复制到视差网页时，它们只显示单词(没有有序数字，或无序点) 以及不可点击的链接，当我删除脚本行时:

<script src="dist/skrollr.min.js"></script>

链接变得可点击，但列表仍然没有list-style；我尝试将 z-index 设置为 1000，但没有成功。

html,
body,
div,
span,
p,
a,
del,
em,
img,
ol,
ul,
li,
fieldset,
form,
label {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
html,
body {
  line-height: 1;
  min-height: 100%;
  font-family: Artial, Verdana, sans-serif;
}
body {
  background: #eeeeee;
  background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
  background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
  background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
  background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
  background: linear-gradient(top, #eeeeee, #cccccc 100%);
  background-attachment: fixed;
}
ol,
ul {
  list-style: none;
}
q {
  font-style: italic;
  color: #333;
}
h1 {
  font-size: 2.91em;
  margin: 0;
}
h1 > small {
  text-align: right;
  display: inline-block;
  font-size: .71em;
  text-indent: 15em;
  color: #444;
}
h2 {
  color: inherit;
  font-size: 1.91em;
  margin: 2em 0 1em 0;
}
h2:first-child {
  margin-top: 0;
}
h3 {
  color: #333;
  font-size: 1.41em;
  margin: 1em 0;
}
#progress {
  height: 2%;
  background: #444;
  bottom: 0;
  z-index: 200;
}
#scrollbar {
  position: fixed;
  right: 2px;
  height: 50px;
  width: 6px;
  background: #444;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  z-index: 300;
  border-radius: 3px;
}
.skrollr-desktop #scrollbar {
  display: none;
}
#bg1,
#bg2,
#bg3 {
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(images/bubbles.png) repeat 0 0;
}
#bg2 {
  z-index: 49;
  background-image: url(images/bubbles2.png);
}
#bg3 {
  z-index: 48;
  background-image: url(images/bubbles3.png);
}
#page1 {
  float: left;
  color: #F03;
  font-size: 2em;
  width: 80%;
  left: 5%;
  top: 1em;
  margin-left: 10%;
  padding: 2em;
  background: #fff;
  text-align: center;
  border-radius: 1em;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#page2 {
  font-size: 2.5em;
  padding-top: 10%;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#page3 {
  margin-right: 200px;
  margin-top: 250px;
  font-size: 1.8em;
}
#page4 {
  color: #033;
  margin-left: 50px;
}
a {
  text-decoration: none;
  z-index: 1000;
}
#easing_wrapper {
  width: 100%;
  height: 100%;
}
#easing {
  top: 10%;
  width: 50%;
  z-index: 101;
}
.drop {
  background: #09f;
  font-weight: bold;
  padding: 1em;
}
#download {
  width: 80%;
  left: 10%;
  height: 80%;
  padding: 3em;
  border: 0 solid #222;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.twitter-share-button,
.twitter-follow-button {
  vertical-align: middle;
}

<script src="dist/skrollr.min.js"></script>
Các giai đoạn chính của Tết gồm :
<ul style="text-decoration:none; text-align:left">
  <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Cu.E1.BB.91i_n.C4.83m">Cuối năm</li>
<li>Tất niên
	<ol>
    	<li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Giao_th.E1.BB.ABa">Giao thừa</a>
  </li>
  <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#C.C3.BAng_Giao_th.E1.BB.ABa_ngo.C3.A0i_tr.E1.BB.9Di">Cúng giao thừa ngoài trời</a>
  </li>
  <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#C.C3.BAng_Giao_th.E1.BB.ABa_trong_nh.C3.A0">Cúng giao thừa trong nhà</a>
  </li>
  </ol>
  </li>
  <li>Bảy ngày đầu năm</li>
  <ol>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Ba_ng.C3.A0y_T.C3.A2n_ni.C3.AAn">Ba ngày tân niên</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#X.C3.B4ng_.C4.91.E1.BA.A5t">Xông đất</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Xu.E1.BA.A5t_h.C3.A0nh_v.C3.A0_h.C3.A1i_l.E1.BB.99c">Xuất hành và hái lộc</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Ch.C3.BAc_T.E1.BA.BFt">Chúc Tết</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#T.E1.BB.A5c_th.C4.83m_vi.E1.BA.BFng">Tục thăm viếng</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#M.E1.BB.ABng_tu.E1.BB.95i">Mừng tuổi</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#H.C3.B3a_v.C3.A0ng">Hóa vàng</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Khai_h.E1.BA.A1">Khai hạ</a>
    </li>
  </ol>
</ul>

Answer 1

您的 CSS 明确将 margin 设置为 0 并将 list-style 设置为 none。

如果您指定 margin-left 属性或大于零，并删除 list-style CSS，那么一切都应该有效:

html,
body,
div,
span,
p,
a,
del,
em,
img,
ol,
ul,
li,
fieldset,
form,
label {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
html,
body {
  line-height: 1;
  min-height: 100%;
  font-family: Artial, Verdana, sans-serif;
}
body {
  background: #eeeeee;
  background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
  background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
  background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
  background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
  background: linear-gradient(top, #eeeeee, #cccccc 100%);
  background-attachment: fixed;
}
/*
Removing the list-style rules:
ol,
ul {
  list-style: none;
}
*/
q {
  font-style: italic;
  color: #333;
}
h1 {
  font-size: 2.91em;
  margin: 0;
}
h1 > small {
  text-align: right;
  display: inline-block;
  font-size: .71em;
  text-indent: 15em;
  color: #444;
}
h2 {
  color: inherit;
  font-size: 1.91em;
  margin: 2em 0 1em 0;
}
h2:first-child {
  margin-top: 0;
}
h3 {
  color: #333;
  font-size: 1.41em;
  margin: 1em 0;
}
#progress {
  height: 2%;
  background: #444;
  bottom: 0;
  z-index: 200;
}
#scrollbar {
  position: fixed;
  right: 2px;
  height: 50px;
  width: 6px;
  background: #444;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  z-index: 300;
  border-radius: 3px;
}
.skrollr-desktop #scrollbar {
  display: none;
}
#bg1,
#bg2,
#bg3 {
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(images/bubbles.png) repeat 0 0;
}
#bg2 {
  z-index: 49;
  background-image: url(images/bubbles2.png);
}
#bg3 {
  z-index: 48;
  background-image: url(images/bubbles3.png);
}
#page1 {
  float: left;
  color: #F03;
  font-size: 2em;
  width: 80%;
  left: 5%;
  top: 1em;
  margin-left: 10%;
  padding: 2em;
  background: #fff;
  text-align: center;
  border-radius: 1em;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#page2 {
  font-size: 2.5em;
  padding-top: 10%;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#page3 {
  margin-right: 200px;
  margin-top: 250px;
  font-size: 1.8em;
}
#page4 {
  color: #033;
  margin-left: 50px;
}
a {
  text-decoration: none;
  z-index: 1000;
}
#easing_wrapper {
  width: 100%;
  height: 100%;
}
#easing {
  top: 10%;
  width: 50%;
  z-index: 101;
}
.drop {
  background: #09f;
  font-weight: bold;
  padding: 1em;
}
#download {
  width: 80%;
  left: 10%;
  height: 80%;
  padding: 3em;
  border: 0 solid #222;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.twitter-share-button,
.twitter-follow-button {
  vertical-align: middle;
}

/* adding a margin-left for the <li> elements: */
li {
  margin-left: 2em;
}

<script src="dist/skrollr.min.js"></script>
Các giai đoạn chính của Tết gồm :
<ul style="text-decoration:none; text-align:left">
  <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Cu.E1.BB.91i_n.C4.83m">Cuối năm</li>
<li>Tất niên
	<ol>
    	<li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Giao_th.E1.BB.ABa">Giao thừa</a>
  </li>
  <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#C.C3.BAng_Giao_th.E1.BB.ABa_ngo.C3.A0i_tr.E1.BB.9Di">Cúng giao thừa ngoài trời</a>
  </li>
  <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#C.C3.BAng_Giao_th.E1.BB.ABa_trong_nh.C3.A0">Cúng giao thừa trong nhà</a>
  </li>
  </ol>
  </li>
  <li>Bảy ngày đầu năm</li>
  <ol>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Ba_ng.C3.A0y_T.C3.A2n_ni.C3.AAn">Ba ngày tân niên</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#X.C3.B4ng_.C4.91.E1.BA.A5t">Xông đất</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Xu.E1.BA.A5t_h.C3.A0nh_v.C3.A0_h.C3.A1i_l.E1.BB.99c">Xuất hành và hái lộc</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Ch.C3.BAc_T.E1.BA.BFt">Chúc Tết</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#T.E1.BB.A5c_th.C4.83m_vi.E1.BA.BFng">Tục thăm viếng</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#M.E1.BB.ABng_tu.E1.BB.95i">Mừng tuổi</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#H.C3.B3a_v.C3.A0ng">Hóa vàng</a>
    </li>
    <li><a href="https://vi.wikipedia.org/wiki/T%E1%BA%BFt_Nguy%C3%AAn_%C4%90%C3%A1n#Khai_h.E1.BA.A1">Khai hạ</a>
    </li>
  </ol>
</ul>