Question

基本上，我的无序列表样式类型（光盘）没有显示在我的页面上？这是为什么？

https://codepen.io/KirbStarRulz/pen/YWXWBp

或者...

   <div class="fluid-container">
  <div class="background">
    <h1 class="headers1">Dr. Norman Borlaug</h1>

    <h3 class="headers3"><em>The man who saved a billion lives</em></h3>

    <div class="pic-divider"> 
    <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" class="main-image" alt="cool pic" />

     <p>Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
    </div>
    <div class="list-div">
    <h2>
Here's a time line of Dr. Borlaug's life:</h2>
    <ul class="ul-list">
      <li class="list-items"><strong>1914</strong> - Born in Cresco, Iowa</li>
      <br>
      <li><strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
    </ul>
    </div>


  </div>
</div>

CSS：

.background {
  background-color: #EEEEEE;
  margin: 5% 5% 5% 5%;
  width: 90%;
  height: 100%;
}

.headers1 {
  text-align: center;
  padding: 20px;
}

.headers3 {
  text-align: center;
}

.main-image {
  margin: 0 auto;
  display: block;
  border: 5px solid #fff;
  border-radius: 4px;
  width: 100%;
}

p {
  text-align: center;
  padding: 20px;
  font-size: 110%;
}

.pic-divider {
  background-color: #fff;
  display: block;
  margin: 0 auto;
  width: 90%;
  height: auto;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  text-align: center;
}

.list-div {
  width: 75%;
  margin: 0 auto;

}

.list-div ul li {
  display: table;
  margin-left: 120px;
  list-style-type: disc;

}

我似乎无法理解我的生活！任何帮助都将非常感谢，这是我的一个项目。

Answer 1

更新：

.list-div ul li {

  display: table;

  margin-left: 120px;

  list-style-type: disc;

}

到：

.list-div ul li {

  margin-left: 120px;

  list-style-type: disc;

}

Answer 2

实际上display: table导致了问题;

.background {
  background-color: #EEEEEE;
  margin: 5% 5% 5% 5%;
  width: 90%;
  height: 100%;
}

.headers1 {
  text-align: center;
  padding: 20px;
}

.headers3 {
  text-align: center;
}

.main-image {
  margin: 0 auto;
  display: block;
  border: 5px solid #fff;
  border-radius: 4px;
  width: 100%;
}

p {
  text-align: center;
  padding: 20px;
  font-size: 110%;
}

.pic-divider {
  background-color: #fff;
  display: block;
  margin: 0 auto;
  width: 90%;
  height: auto;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  text-align: center;
}

.list-div {
  width: 75%;
  margin: 0 auto;

}

.list-div ul li {
  margin-left: 120px;
  list-style-type: disc;

}

   <div class="fluid-container">
  <div class="background">
    <h1 class="headers1">Dr. Norman Borlaug</h1>

    <h3 class="headers3"><em>The man who saved a billion lives</em></h3>

    <div class="pic-divider"> 
    <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" class="main-image" alt="cool pic" />

     <p>Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
    </div>
    <div class="list-div">
    <h2>
Here's a time line of Dr. Borlaug's life:</h2>
    <ul class="ul-list">
      <li class="list-items"><strong>1914</strong> - Born in Cresco, Iowa</li>
      <br>
      <li><strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
    </ul>
    </div>


  </div>
</div>

我的页面中缺少列表样式类型？

2 个答案: