목록 내의 텍스트와 LESS의 정렬 및 레이어 최적화

내 코드로 전문가의 도움이 필요합니다! 나는 웹 개발을 배우기 시작했고, 이제는 내 프로젝트에 문제가있다.목록 내의 텍스트와 LESS의 정렬 및 레이어 최적화

웹 페이지의 레이어 작업 방법을 이해할 수 없습니다. 적응 형 사이트를 만들고 싶다면 브라우저 창의 크기를 조정할 때 레이어가 겹칩니다. 내 핀을 정당한 형태로 적응시키는 법?

내 메뉴 (내 코드 -> div 사용자, 숫자가있는 동그라미) (LINK TO PIN)의 목록에서 내부 정렬 객체는 어떻게됩니까?

@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 
 

 
@green: #2ECC71; 
 
@white: #E4F1FE; 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: @green; 
 
} 
 

 
.user { 
 
    margin: 0; 
 
    position: absolute; 
 
    display: flex; 
 
    width: auto; 
 
    top: 5%; 
 
    left: 10%; 
 
    .name { 
 
    position: relative; 
 
    display: flex; 
 
    left: 25px; 
 
    top: 25px; 
 
    color: @white; 
 
    font-family: 'Open Sans', sans-serif; 
 
    } 
 
    ul { 
 
    margin: 0; 
 
    position: relative; 
 
    display: flex; 
 
    left: 10px; 
 
    align-items: center; 
 
    } 
 
    li { 
 
    position: relative; 
 
    list-style: none; 
 
    display: inline; 
 
    justify-content: center; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    margin: 0px 15px 0px 0px; 
 
    background-color: darken(@green, 2%); 
 
    } 
 
} 
 

 
.avatar { 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 50%; 
 
} 
 

 
.menu { 
 
    position: relative; 
 
    top: 20px; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 0; 
 
    li { 
 
    list-style: none; 
 
    } 
 
    a { 
 
    font-family: 'Open Sans', sans-serif; 
 
    text-decoration: none; 
 
    width: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
    padding: 15px 15px 15px 15px; 
 
    background-color: darken(@green, 2%); 
 
    border-radius: 100px; 
 
    margin: 0px 5px 0px 5px; 
 
    color: @white; 
 
    &:hover { 
 
     background-color: lighten(@green, 10%); 
 
     border-bottom: 2px solid lighten(@green, 25%); 
 
    } 
 
    &:active { 
 
     border-bottom: 2px solid lighten(@green, 25%); 
 
    } 
 
    } 
 
}

<html> 
 
    <body> 
 
    <div class="header"> 
 
     <div class="user"> 
 
     <img class="avatar" 
 
      src="http://lorempixel.com/200/200/cats/"> 
 
     <p class="user name">UserName</p> 
 
     <ul> 
 
      <li>1</li> 
 
      <li>2</li> 
 
     </ul> 
 
     </div> 
 
     <ul class="menu"> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Media</a></li> 
 
     </ul> 
 
     
 
    </div>

출처

2016-08-17 salamanrMan