머리글이 무작위로 떠오름

Question

편집 : vakho papidze의 도움으로 머리글을 가운데로 맞출 수 있지만 인라인이 아니거나 올바른 위치에 있습니다. 다음은 최종 버전에서 찾고있는 다이어그램입니다 : https://gyazo.com/3a71cc861daf2ec897cceed30d4bb576. 내가 다른 페이지로 사용자를 재배치 헤더 만 3 타이틀을 사용 할 때 과거에

---

는, 헤더 라인에서 올바른 위치에 있었다. 추가 제목을 추가하면 전체 머리글이 페이지 밖으로 이동하고 페이지의 오른쪽 상단에서 자신을 재배치합니다. 여기서 코드가 틀린 머리글 ( https://codepen.io/valik140795/pen/qadXOo)이있는 페이지의 코드 펜을 확인할 수 있습니다. 이 같은

<ul> 
    <style> 
.dropbtn { 
background-color: #282828; 
color: #AA9568; 
padding: 0px; 
font-size: 16px; 
border: none; 
cursor: pointer; 
} 

.dropbtn:hover, .dropbtn:focus { 
background-color: #282828; 
} 


.dropdown { 
position: relative; 
z-index: 999; 
display: inline-block; 
} 

.dropdown-content { 
display: none; 
position: fixed; 
z-index: 999; 
background-color: #282828; 
min-width: 180px; 
overflow: auto; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
color: #AA9568; 
padding: 3px 5px; 
text-decoration: none; 
display: block; 
} 

.dropdown a:hover {background-color: #282828} 

.show {display:block;} 
</style> 

<div class="dropdown"> 
<button onclick="myFunction()" class="dropbtn"><a href=#fab>ФАБРИКИ</a>  </button> 
    <div id="myDropdown" class="dropdown-content"> 
<a href="#nobilis">Nobilis</a> 
<a href="#colordeseda">Color de Seda</a> 
<a href="#eugenio">Eugenio Colombo</a> 
<a href="#libra">Libra</a> 
    </div> 
</div> 

<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
document.getElementById("myDropdown").classList.toggle("show"); 
} 

function filterFunction() { 
var input, filter, ul, li, a, i; 
input = document.getElementById("myInput"); 
filter = input.value.toUpperCase(); 
div = document.getElementById("myDropdown"); 
a = div.getElementsByTagName("a"); 
for (i = 0; i < a.length; i++) { 
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) { 
     a[i].style.display = ""; 
    } else { 
     a[i].style.display = "none"; 
    } 
} 
} 
</script> 

    <li>|</li> 

    <ul> 
    <style> 
.dropbtn { 
background-color: #282828; 
color: #AA9568; 
padding: 0px; 
font-size: 16px; 
border: none; 
cursor: pointer; 
} 

.dropbtn:hover, .dropbtn:focus { 
background-color: #282828; 
} 


.dropdown { 
position: relative; 
z-index: 999; 
display: inline-block; 
} 

.dropdown-content { 
display: none; 
position: fixed; 
z-index: 999; 
background-color: #282828; 
min-width: 180px; 
overflow: auto; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
color: #AA9568; 
padding: 3px 5px; 
text-decoration: none; 
display: block; 
} 

.dropdown a:hover {background-color: #282828} 

.show {display:block;} 
</style> 



<div class="dropdown"> 
<button onclick="myFunction()" class="dropbtn"><a href=#fab>ДИЛЕРЫ</a>  </button> 
    <div id="myDropdown" class="dropdown-content"> 
    <a href="#nobilis">Nobilis</a> 
    <a href="#colordeseda">Color de Seda</a> 
    <a href="#eugenio">Eugenio Colombo</a> 
    <a href="#libra">Libra</a> 
    </div> 
</div> 

<script> 
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
document.getElementById("myDropdown").classList.toggle("show"); 
} 

function filterFunction() { 
var input, filter, ul, li, a, i; 
input = document.getElementById("myInput"); 
filter = input.value.toUpperCase(); 
div = document.getElementById("myDropdown"); 
a = div.getElementsByTagName("a"); 
for (i = 0; i < a.length; i++) { 
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) { 
     a[i].style.display = ""; 
    } else { 
     a[i].style.display = "none"; 
    } 
} 
} 
</script>   

    <li>|</li> 
    <li><a href="http://www.123contactform.com/form-2178643/My-  Form">Сотрудничество</a></li> 
    <li>|</li> 
    <li><a href="contact.html">Контакты</a></li> 
    </ul> 
</div> 

Answer 1

변화와 작동합니다 :

.block_header ul { 
 
    position: absolute; 
 
    bottom: 61px; 
 
    right: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
}