Question

这不可能更简单，但不知怎的，我无法弄明白。我想要一个图像在最左边，一系列按钮作为一组右对齐。一切都应该出现在一行上。

＆＃13;

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

＆＃13;

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

＆＃13;

但是当这呈现时，我得到了我想要的徽标，按钮确实是对齐的。但是，按钮行在徽标下方下面。它应该在同一行 - 这是inline-block的用途，对吗？它的渲染就好像我使用block而不是inline-block。

为什么我的按钮与图像位于同一行？适合各种物品的宽度都很大。

谢谢！

Answer 1

你也需要制作#logo内联块。

https://jsfiddle.net/7b91bo0p/

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

`inline-block`表现得像`block`

1 个答案: