html - 标题 float 和段落本身随机

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;
}