내비게이션 막대를 로고 아래로 움직여서 그곳에 머물게하는 방법은 무엇입니까?

현재 CSS와 HTML을 사용하지 않고 웹 사이트를 만들고 있습니다. 그러나 내 탐색 바에 문제가 있습니다. 나는 그것을 만들었지 만, 내 로고를 페이지 상단, 즉 탐색 표시 줄 위에 놓으면 탐색 막대가 페이지의 중간 부분으로 이동하고 어떻게 움직이지도 모르겠다. 로고 바로 아래에 있습니다. 내가 기억하는 바로는이 시점에 위치하지 않은 다른 이미지를 넣을 때 이런 일이 발생했지만 이미지를 이동 한 후에도 탐색 막대가 원래 위치로 돌아 가지 않았습니다. 고정 위치를 설정하려고 시도했지만 화면의 왼쪽으로 이동했습니다.내비게이션 막대를 로고 아래로 움직여서 그곳에 머물게하는 방법은 무엇입니까?

또한 내 웹 사이트 내에서 두 번째 이미지를 탐색 막대를 다시 손상시키지 않고 이동하는 방법은 무엇입니까?

여기 내 CSS입니다 :

#image1 { 
display: block; 
margin-left: auto; 
margin-right: auto; 
height: 8%; 
width: 30%; 
} 

#image2 { 
position: relative; 
width: 20%; 
top: 400px; 
right: 481px; 

} 
ul { 
list-style-type:none; 
width:60%; 
margin: auto; 
padding: 0; 
overflow: hidden; 
background-color: rgba(163,21,23,1.00) 
} 

li { 
float: right; 
width: 33.33%; 
} 

li a { 
display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
border: thin; 
border-style: groove; 
} 

li a:hover { 
background-color: #111; 
} 

body { 
background-color: rgba(96,96,96,1.00) 
}

그리고 이것은 내 HTML 경우 : CSS에서

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> LoL </title> 
<link href="css/style.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<img src="assets/lol.png" alt="Logo" id="image1"> 
<img src="assets/minions.png" alt="Minions in LoL" id="image2" > 

<ul> 
<li><a class="active" href="#Home">Home</a></li> 
<li><a href="#Farming">Farming</a></li> 
<li><a href="#Best champions for each role">Best champions for each role</a> 
</li> 
</ul> 
<banner></banner> 
</body> 
</html>

출처

2017-11-12 xKetjow

로고와 탐색 모음을 동일한 수평선으로 원하십니까? – Sudarshan

동일하지만 하나는 서로 위아래로 위, 중앙의 로고가 먼저 표시되고, 그 바로 아래에 Nav 막대가 표시됩니다. 이 작업이 완료되었지만 다른 이미지를 삽입하면 탐색 막대가 완전히 이동합니다. – xKetjow

수정 - 해결했습니다. 필요한 것은 HTML에서 두 번째 이미지에 대한 xKetjow

이미지 1 픽셀에 대한 퍼센트로 높이를 변경합니다. (예를 들어 150 픽셀)

Image1 { height: 150px; }

는 그런 다음 UL 요소와 바로 로고 아래에있는 탐색 표시 줄을 앉아 있어야

Ul { 
Top: 150px; 
Display: Fixed; 
}

를 넣어보십시오!

브라우저의 개발 도구를 사용하여 어떤 현상이 발생하는지 확인하십시오. I.E. 마진을 강요합니다. 크롬에서 마우스 오른쪽 버튼을 클릭하고 "요소 검사"를 할 수 있습니다.

출처

2017-11-12 13:50:30

그래서 나는 서로를 바로 잡을 수 있었지만, 이제는 더 많은 이미지를 넣을 때 내비게이션 바를 완전히 움직입니다. 원래 위치로 되돌릴 수는 없습니다. 나는 고정 된 위치에 놓았을 때 오른쪽으로 움직였다. – xKetjow

수정 - 수정했습니다. 필요한 것은 HTML에서 두 번째 이미지에 대한 xKetjow

내비게이션 막대를 로고 아래로 움직여서 그곳에 머물게하는 방법은 무엇입니까?

답변

관련 문제