2017-06-06 80 views
0

我試圖讓菜單按鈕和搜索按鈕並排放在標題中,但似乎沒有任何工作。下面是我目前正在獲取的圖片以及按鈕的相關標記和樣式。按鈕不會並排

什麼我越來越: enter image description here

HTML:

<div class="navbar navbar-default navbar-fixed-top"> 
        <div class="navbar-header"> 
         <button type="button" id="searchbuttonmobile" ><img src="~/Images/SearchBtn.png" /></button>       
         <button type="button" onclick="openNav()" class="navbar-toggle" data-toggle="collapse" data-target=".mobilenav" id="menubutton"> 
          <img src="~/Images/MobileMenuBtn.png" /> 
         </button> 
</div> 

CSS:

/*----------------------------------*/ 
/*---MOBILE MENU LOGO AND BUTTONS---*/ 
/*----------------------------------*/ 
@media (max-width: 400px) { 

    #logo { 
     width: 100px; 
    } 

    #smokefree { 
     padding-left: 5px; 
     padding-top: 20px; 
    } 

     #smokefree a { 
      font-size: 14pt; 
     } 



    #menubutton img { 
     width: 43px; 
     height: 44px; 
    } 

    #searchbuttonmobile { 
     padding: 9px 0px; 
    } 

    #searchbuttonmobile img { 
     width: 43px; 
     height: 44px; 
    } 
} 


/*--------------------------------------*/ 
/*--------MENU BUTTON APPEARANCE--------*/ 
/*--------------------------------------*/ 
@media (max-width: 1279px) { 
    .navbar-header { 
     float: none; 
    } 

    .navbar-left, .navbar-right { 
     float: none !important; 
    } 

    .navbar-toggle { 
     display: block; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 10px; 
    } 

    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 
     background-color: transparent; 
    } 

    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 

    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 

    .navbar-collapse.collapse, .desktopnav { 
     display: none !important; 
    } 

    #mobilenav { 
     display: block; 
    } 

    #searchbuttonmobile { 
     padding: 9px 10px; 
     display: inline; 
    } 

    .navbar-nav { 
     float: none !important; 
     margin-top: 7.5px; 
    } 

     .navbar-nav > li { 
      float: none; 
     } 

      .navbar-nav > li > a { 
       padding-top: 10px; 
       padding-bottom: 10px; 
      } 

    .collapse.in { 
     display: block !important; 
    } 
} 
+0

按鈕默認情況下,塊元素(如在顯示:塊;)你想要做的是添加'display:inline-block'到你的按鈕css :) – ThisGuyHasTwoThumbs

+0

無法重現,你發佈的代碼不是足夠 –

+0

@ThisGuyHasTwoThumbs試過,他們仍然保持堆疊。 :-( –

回答

2

您可以更改按鈕顯示到inline-block的作爲ThisGuyHasTwoThumbs寫在評論。 也可以將按鈕浮動到右側。

.navbar-header button{ 
float:right; 
display:block; 
} 

或使用:

.navbar-header button{ 
display:inline-block; 
} 
+0

在@ThisGuyHasTwoThumbs建議工作後,將按鈕浮動。真的很簡單,謝謝你們! –

1

變化display: blockdisplay: inline-block.navbar-toggle

0

.navbar-header button{ 
 
     float:right; 
 
    }

添加上面的代碼在你的CSS。

這裏的工作Demo

希望這有助於。

0

只有float:right;可以使它工作。

按照此fiddle鏈接。