按鈕和文本不在行

有人知道爲什麼右邊的按鈕不符合標題和左邊的按鈕嗎？我試着用position：fixed，但是它在標題下（可見但不可點擊）。我現在不在這裏做錯了什麼。按鈕和文本不在行

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

由於 JSFiddle Code

來源

2016-04-18 Adrian

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>

中的每個div的寬度.titlle取決於您的選擇。

來源

2016-04-18 20:55:00

這裏是js小提琴鏈接，看看，https://jsfiddle.net/zeasts/ucjyo1o9/ –

@Adrian，你可以點擊「這個答案已滿」按鈕，如果你不介意的話。謝謝 –

謝謝，那個效果更好！ – Adrian

您有一個顯示像塊2層的元件。 Div和h1。

<div id="headerElements"> 

    <h1> TITEL </h1> 

    </div>

而且在風格上H1您使用寬度：100％

header h1 { 

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

您需要刪除DIV ID = 「headerElements」和替換H1風格

header h1 { 
    display: inline-block; 
}

來源

2016-04-18 20:39:49

唐不要讓Float誤導你：對。

您應以身作則做：

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

他們鏟左朝海誓山盟，會做的伎倆;）

來源

2016-04-18 20:42:32 user3860822

按鈕和文本不在行

回答

相關問題