按钮不会并排

问题描述：

我试图让菜单按钮和搜索按钮并排放在标题中，但似乎没有任何工作。下面是我目前正在获取的图片以及按钮的相关标记和样式。按钮不会并排

什么我越来越：

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

按钮默认情况下，块元素（如在显示：块;）你想要做的是添加'display：inline-block'到你的按钮css :) – ThisGuyHasTwoThumbs

无法重现，你发布的代码不是足够 –

@ThisGuyHasTwoThumbs试过，他们仍然保持堆叠。 :-( –

答

您可以更改按钮显示到inline-block的作为ThisGuyHasTwoThumbs写在评论。也可以将按钮浮动到右侧。

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

或使用：

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

在@ThisGuyHasTwoThumbs建议工作后，将按钮浮动。真的很简单，谢谢你们！ –

答

变化display: block到display: inline-block在.navbar-toggle

答

.navbar-header button{ 
 
     float:right; 
 
    }

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

这里的工作Demo

希望这有助于。

答

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

按照此fiddle链接。

相关推荐