목록 스타일 유형이 내 페이지에 없습니다.

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>