内联块容器不坐在一起，导致容器扩展

-1

道歉，我试图创建一个JS小提琴复制，但问题似乎并没有发生在JS小提琴，所以我只能认为它是一个问题与更一般的CSS在页面上。内联块容器不坐在一起，导致容器扩展

的JS小提琴创建不显示错误，但在这里它是无论如何：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;}

直播链接，就可以看到菜单处于的底部页面（灰色框）http://digitalshowcase.somethingbigdev.co.uk/

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

来源

2015-06-04 Francesca

那么，33.33 + 66.66 = 99.99，所以仍然有00.01％的空间。 – Vucko

@Vucko和？这并不能解释这个问题。 – Francesca

如果你检查的代码，你会看到，他们实际上是在旁边... – Tom

我想加入vertical-align：middle;到.grid会做到这一点。

来源

2015-06-04 17:04:22 NewsletterPoll

内联块容器不坐在一起，导致容器扩展

回答

相关问题