`inline-block`像`block`一樣行事

Question

這不能簡單些，但不知何故我無法弄清楚。我想要一個圖像位於最左側，並且一系列按鈕要作爲一個組右對齊。一切應該出現在一行上。

#titleframe {width:100%; height:85px; display:inline-block;} 
 
    
 
    #logo {width:256px; height:85px; margin-left:20px;} 
 
    
 
    #logo img {width:100%; height:auto;} 
 
    
 
    #menu-buttons-container {display:inline-block; float:right; height:40px;} 
 
    
 
    #menu-buttons button {width:75px; height:40px;}

<div id="titleframe"> 
 
     <div id="logo"><img src="https://..."></div> 
 
     <div id="menu-buttons-container"> 
 
     \t <button>text</button> 
 
     \t <button>text</button> 
 
     \t <button>text</button> 
 
     \t <button>text</button> 
 
     \t <button>text</button> 
 
     </div> \t \t 
 
    </div>

但是，當這種渲染，我得到我想要它的標誌，並且按鈕確實右對齊。但是，按鈕行放置在下方一排的標誌上。它應該在同一排 - 這就是inline-block的用途，對吧？它的渲染方式好像我使用的是block而不是inline-block。

爲什麼我的按鈕與圖像位於同一行？有足夠的寬度適合一切。

謝謝！

Answer 1

您還需要製作#logo行內塊。

https://jsfiddle.net/7b91bo0p/

#logo {width:256px; height:85px; margin-left:20px;display:inline-block}