HTML 웹 페이지의 내 객체 (navbar, image)

나는이 사이트를 만들었으므로 중간에 navbar 또는 my image를 얻을 수 없습니다. 나는 플렉스 박스를 만들고, 마진을 설정하는 것과 같이 많은 노력을 했었지만 .... 나는 문제를 찾을 수 없다. 나는 그것이 어수선 해 보였기 때문에 당신이 그림 등을 볼 수 없다는 것이 문제가 아니기를 바랍니다.HTML 웹 페이지의 내 객체 (navbar, image)

body { 
 
    background-color: #333333; 
 
} 
 

 
.navBar { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    padding: 10px; 
 
    background-color: #9D9C9C; 
 
    opacity: 0.8; 
 
    width: 95%; 
 
    position: fixed; 
 
    align-items: center; 
 
} 
 

 
.logo { 
 
    width: 200px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    width: 40%; 
 
    white-space: nowrap; 
 
} 
 

 
a { 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.voorPagina { 
 
    width: 95%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Dia architecten</title> 
 
</head> 
 

 
<body> 
 

 
    <div class="navBar"> 
 
    <img class="logo" src="/Images/LogoDIA.png" /> 
 
    <ul> 
 
     <a href="#Projecten">Projecten</a> 
 
     <a href="#Over">Over</a> 
 
     <a href="#Contact">Contact</a> 
 
    </ul> 
 
    </div> 
 

 
    <img class="voorPagina" src="Images/VPDia.png" /> 
 

 
</body> 
 

 
</html>

감사합니다 : 여기

내 코드의 일부이다!

출처

2017-09-15 Siebe Dreesen

이와 비슷한?

.navBar 클래스를 사용하여 div에 justify-content: space-between;을 사용하는 경우 justify-content: center;으로 이동하면 div의 모든 하위 요소가 가운데에 배치됩니다! 또한 확인을 위해 자리 표시 자 이미지를 추가했습니다!

참고 :적절한 중심의 네비게이션 바을 보려면 링크 full page를 클릭하십시오!

body { 
 
    background-color: #333333; 
 
} 
 

 
.navBar { 
 
    display: flex; 
 
    justify-content: center; 
 
    padding: 10px; 
 
    background-color: #9D9C9C; 
 
    opacity: 0.8; 
 
    width: 95%; 
 
    position: fixed; 
 
    align-items: center; 
 
} 
 

 
.logo { 
 
    width: 200px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    width: 40%; 
 
    white-space: nowrap; 
 
} 
 

 
a { 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.voorPagina { 
 
    width: 95%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Dia architecten</title> 
 
</head> 
 

 
<body> 
 

 
    <div class="navBar"> 
 
    <img class="logo" src="http://lorempixel.com/100/25/" /> 
 
    <ul> 
 
     <a href="#Projecten">Projecten</a> 
 
     <a href="#Over">Over</a> 
 
     <a href="#Contact">Contact</a> 
 
    </ul> 
 
    </div> 
 

 
    <img class="voorPagina" src="Images/VPDia.png" /> 
 

 
</body> 
 

 
</html>

출처

2017-09-15 20:55:56

HTML 웹 페이지의 내 객체 (navbar, image)

답변

관련 문제