內聯塊容器不坐在一起，導致容器擴展

-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

內聯塊容器不坐在一起，導致容器擴展

回答

相關問題