AngularJS - 반복적 인 P 태그가 올바르게 랩핑되지 않음

Question

내 화면의 데스크톱 버전에서 올바르게 표시되고 올바르게 래핑되는 각기 다른 스킬의 배열을 개발했지만 작은 화면에서는 항목이 컨테이너의 패딩을 무시합니다. 너비와 항상 같은 지점에서 랩하지 못했습니다.

역설적이게도 배열의 객체 'Responsive Design'이 목록에 표시되면 'Responsive'라는 단어가 포함되지 않으므로 컨테이너의 너비와 'Design'이라는 단어가 올바르게지나 가게됩니다. 새 줄을 감싼다.

코덱스 : http://codepen.io/nickwcook/full/KWePVx/.

HTML :

<section id="about" ng-controller="skillsController"> 

    <div class="sectionContent"> 

    <div id="bio"> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    </div> 

    <div id="skillsList"> 

     <p>My skills include:</p> 

     <p ng-repeat="skill in skills" class="skillItem">{{skill.name}}.</p> 

    </div> 

    </div> 

    </div> 

</section> 

CSS :

section 
{ 
display: block; 
margin: 0; 
background: transparent; 
z-index: 90; 
} 

.sectionContent 
{ 
min-height: 100vh; 
display: flex; 
align-items: center; 
justify-content: center; 
flex-direction: column; 
padding: 100px 30px; 
box-sizing: border-box; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
} 

/* ABOUT SECTION */ 

#about .sectionContent > div 
{ 
width: 100%; 
padding: 0 15%; 
} 

#about p 
{ 
line-height: 26px; 
text-align: center; 
} 

#about #skillsList 
{ 
text-align: center; 
margin-top: 50px; 
} 

#about #skillsList p:first-of-type 
{ 
margin-bottom: 10px; 
} 

#about #skillsList p.skillItem 
{ 
display: inline; 
margin: 0 15px; 
} 

Answer 1

변경이

#about #skillsList p.skillItem { 
    display: inline; 
    margin: 0 15px; 
} 

이에

#about #skillsList p.skillItem { 
    display: inline-block; 
    margin: 0 15px; 
} 

- 레이아웃을 수정 하겠지만 P 요소에서 더 많은 의미 론적 접근을 위해 List (ul> li)를 사용하는 것이 좋습니다.