Knopf und Text ist nicht in Zeile

Question

weiß jemand, warum der Knopf auf der rechten Seite nicht mit dem Titel und dem Button auf der linken Seite übereinstimmt? Ich habe es mit position versucht: behoben, aber dann ist es unter dem Titel (sichtbar, aber nicht anklickbar). Ich mache jetzt nicht, was ich hier falsch mache.

<header class="title"> 

    <button id="buttonLeft" class="btn-square pull-left" onclick="toggleMenu()"> 

    <i class="fa fa-chevron-left"></i> 

    </button> 

    <div id="headerElements"> 

    <h1> TITEL </h1> 

    </div> 

    <button id="buttonRight" class="btn-square pull-right" onclick=""> 

    <i class="fa fa-chevron-right"></i> 

    </button> 

</header> 

    header.title { 

    display: inline-block; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 72px; 
    background-color: #37baf4; 
    color: white; 
    display: inline; 
    text-align: center; 
    z-index: 90; 
} 

header h1 { 

    left: 0; 
    top: 0px; 
    right: 0; 
    width: 100%; 
    z-index: 90; 
} 

#buttonLeft { 
    float: left; 
    margin: 18px; 
    z-index: 101; 
} 

#buttonRight { 

    float: right; 
    margin: 18px; 
    z-index: 101; 
} 

.pull-left {} 

.pull-right {} 

.btn-square { 

    background-color: rgba(255, 255, 255, 1.0); 
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.9); 
    width: 40px; 
    height: 40px; 
    border: 1px solid; 
    border-color: white; 
} 

Dank JSFiddle Code

Answer 1

header.title { 
 

 
    display: inline-block; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 72px; 
 
    background-color: #37baf4; 
 
    color: white; 
 
    display: inline; 
 
    text-align: center; 
 
    z-index: 90; 
 
} 
 
header.title div{ 
 
    float: left; 
 
} 
 

 
header h1 { 
 

 
    left: 0; 
 
    top: 0px; 
 
    right: 0; 
 
    z-index: 90; 
 
} 
 

 
#buttonLeft { 
 
    float: left; 
 
    margin: 18px; 
 
    z-index: 101; 
 
} 
 

 
#buttonRight { 
 

 
    float: right; 
 
    margin: 18px; 
 
    z-index: 101; 
 
} 
 

 
.pull-left {} 
 

 
.pull-right {} 
 

 
.btn-square { 
 

 
    background-color: rgba(255, 255, 255, 1.0); 
 
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.9); 
 
    width: 40px; 
 
    height: 40px; 
 
    border: 1px solid; 
 
    border-color: white; 
 
}

<header class="title"> 
 
    <div> 
 
    <button id="buttonLeft" class="btn-square pull-left" onclick="toggleMenu()"> 
 
     <i class="fa fa-chevron-left"></i> 
 
    </button> 
 
    </div> 
 
    <div id="headerElements"> 
 
    <h1> TITEL </h1> 
 
    </div> 
 
    <div> 
 
    <button id="buttonRight" class="btn-square pull-right" onclick=""> 
 
     <i class="fa fa-chevron-right"></i> 
 
    </button> 
 
    </div> \t 
 
</header>

Die Breite des jeweiligen div in .titlle ist abhängig von Ihrer Wahl.

Answer 2

Sie haben zwei Elemente, die wie Block anzeigt. Div und h1.

<div id="headerElements"> 

    <h1> TITEL </h1> 

    </div> 

Und in der Art h1 verwendet man Breite: 100%

header h1 { 

    left: 0; 
    top: 0px; 
    right: 0; 
    width: 100%; 
    z-index: 90; 
} 

Sie löschen müssen div id = "headerElements" und ersetzen h1 Stil

header h1 { 
    display: inline-block; 
} 

Answer 3

Don Lass dich nicht von Float in die Irre führen: richtig.

Sie mit gutem Beispiel tun sollten:

#buttonLeft{ 
    width:20%; 
    float:left; 
} 
#headerElements{ 
    width:60%; 
    float:left; 
} 
#buttonRight{ 
    width:20%; 
    float:left; 
} 

Sie schaufel auf einander verlassen, dass der Trick tun;)