インラインブロックを使用すると幅50％のULを含むDivは正しく配置されません

Question

2つのdivには並んで配置したいUL要素が含まれています。基本的な考え方は、2つのメニュー要素を持つことです.1つは左に、もう1つは右に揃えます。今度はwidth:50%とdisplay:inline-blockを設定すると、要素は別々の行になります。

問題のdivは.bottomMenuRightです。 bottomMenuLeft。

私が間違っていることを理解できません。

HTML：

<div class="outer"> 
    <div class="middle"> 
    <div class="navMenu"> 
     <ul> 
     <li>Add</li> 
     <li>Browse</li> 
     </ul> 
    </div> 
    <hr> 
    <div class="test"> 
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur repellat ab minus dolore officia, ex praesentium necessitatibus dolorem, aperiam, porro ullam eius quas itaque, nostrum doloremque provident quam neque obcaecati.</div> 
     <div>Architecto blanditiis sed obcaecati, quas possimus expedita molestiae quaerat facilis saepe doloribus numquam velit. Praesentium modi sed consequuntur voluptates dicta, exercitationem laboriosam, repellat quam itaque repellendus harum, blanditiis 
     iure error.</div> 
     <div>Ut perferendis nam totam neque facilis officia maxime animi velit, recusandae voluptatibus, aut rem in et ipsam quia id unde itaque quae, incidunt provident iste, sit? Corporis dicta, in ex.</div> 
     <div>Doloremque inventore quos, qui maiores libero dolor veritatis, earum molestias unde autem optio, culpa ex quia error iure. Eos quos, mollitia nam quis incidunt sit voluptate amet, eveniet iusto eligendi.</div> 
     <div>Odit cum laborum dolor delectus consectetur architecto, animi ipsum aperiam libero eveniet neque inventore quasi, facere quo sint possimus, tempore doloremque eius perferendis beatae? Laboriosam tempora id architecto quisquam enim?</div> 
    </div> 
    <hr> 
    <div class="bottomMenu"> 
     <div class="bottomMenuLeft"> 
     <ul> 
      <li>F</li> 
      <li>T</li> 
     </ul> 
     </div> 
     <div class="bottomMenuRight"> 
     <ul> 
      <li>O</li> 
      <li>D</li> 
      <li>U</li> 
     </ul> 
     </div> 
    </div> 
    <div class="inner"> 
    </div> 
    </div> 
</div> 

CSS：

.outer { 
    display: table; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
} 

.middle { 
    display: table-cell; 
    vertical-align: middle; 
} 

.inner { 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
} 

body { 
    background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/paper_2.png"); 
} 

.test { 
    width: 40%; 
    margin: 0 auto; 
    font-family: 'Cormorant Garamond', serif; 
    font-family: 'Libre Baskerville', serif; 
    text-align: center; 
} 

.bottomMenu { 
    width: 100%; 
} 

.bottomMenuRight, 
.bottomMenuLeft { 
    display: inline-block; 
    width: 50%; 
} 

.bottomMenuRight ul, 
.bottomMenuLeft ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.bottomMenuRight ul { 
    text-align: right; 
} 

.bottomMenuLeft ul { 
    text-align: left; 
} 

.bottomMenuRight li, 
.bottomMenuLeft li { 
    display: inline-block; 
    background-color: grey; 
    padding: 0.5em; 
    font-size: 1.5em; 
    border-radius: 50%; 
} 

ここではあなたがいじるしたい場合はcodepenです。

Answer 1

物はインラインブロックです。インラインブロックは、通常、親フォントサイズ：0を設定することで離された余分なスペースを追加しますが...

もっと簡単な方法はfloat両方の要素になり、clearfixをコンテナに適用します。 clearfixの最も速い解決策は、overflow: hidden