内联块容器不会并排放置，导致容器膨胀

Question

抱歉，我试图创建一个 JS Fiddle 复制，但问题似乎并没有出现在 JS Fiddle 所以我只能认为这是更一般的问题CSS 在页面上。

创建的 JS Fiddle 没有显示错误，但无论如何它在这里：https://jsfiddle.net/j2qxh9zg/

我正在尝试并排排列两个元素。它们使用 display:inline-block;，宽度为 33.3% 和 66.6%。正文已设置 font-size:0 以消除任何空白问题，因此我认为这不是容器之间的空白问题。

<div class="grid one-third">
            <div class="logo">
                <img src="assets/logo.png" alt="Something"/>
            </div>
        </div>
        <div class="grid two-thirds menu">
            <ul>
                <li><a name="#home">Home</a></li>
                <li><a name="#expertise">Our Expertise</a></li>
                <li><a name="#portfolio">Portfolio</a></li>
                <li><a name="#tech">New Technology</a></li>
                <li><a name="#contact">Get In Touch</a></li>
                <li>01483 746650</li>
            </ul>
        </div>

我似乎无法让 .one-third 和 .two-thirds div 并排放置，尽管它们都是 display:inline-block;

.grid.one-third{width:33.3%}
.grid.two-thirds{width:66.6%}
.grid{display:inline-block;box-sizing:border-box;}

直播link，可以看到菜单在页面底部（灰框）http://digitalshowcase.somethingbigdev.co.uk/

导航容器高 70 像素。它应该是 50px 高。两个内部元素都是 50px 高，但容器会扩展。为什么？

Answer 1

我想添加 vertical-align: middle;到 .grid 就可以了。

内联块容器不会并排放置，导致容器膨胀

Inline-block containers do not sit site by side, cause expansion of container

css

inline

grid-layout