私のdivには、その子ではないdivも含まれているのはなぜですか？

Question

あなたはこのフィドルをチェックしてくださいすることができ：ここでは https://jsfiddle.net/3047p0wy/ はHTMLで次のように

<nav class="navbar navbar-default"> 
<div class="container-fluid" id="navigation-bar"> 
<div class="navbar-header"> 
    <div class="headerspace"> 
    <a href="http://google.com"> 
     <span>The title</span> 
    </a> 
    </div> 
</div> 
<div class="collapse navbar-collapse" id="navbar-collapse-element"> 
    <ul class="nav navbar-nav navbar-right" id="tabs"> 
    <li> 
     <div class="tab"> 
     <a href="http://google.com"> 
      <div class="greysquare"> 
      <div class='greysquare-content'> 
       <div> 
       <span>EX</span></div> 
      </div> 
      </div> 
      <div class="notgreysquare"><span>PLORE</span></div> 
     </a> 
     </div> 
    </li> 
    </ul> 
</div> 
</div> 
</nav> 

とCSSは次のとおりです。

.navbar { 
    height: 100%; 
    margin-top: 10px; 
    background-color: inherit; 
    border: none; 
} 

.navbar-header { 
    height: 100%; 
    width: 30%; 
} 

#navigation-bar { 
    height: 100%; 
} 

#navbar-collapse-element { 
    height: 100%!important; 
} 

#tabs { 
    max-height: 100%; 
} 

.tabspace { 
    max-height: 100%; 
    width: 70%; 
} 

.tab { 
    margin-left: 5%; 
    margin-top: 1%; 
    max-height: 100%; 
} 

.greysquare, 
.notgreysquare { 
    display: inline; 
} 

.greysquare { 
    display: block; 
    width: 70px; 
    background-color: #CCCCCB; 
    height: 100%; 
    max-height: 100%; 
} 

.greysquare:before { 
    content: ""; 
    display: block; 
    padding-top: 100%; 
} 

.greysquare-content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

.greysquare-content div { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

.greysquare-content span { 
    display: table-cell; 
    text-align: right; 
    vertical-align: bottom; 
} 

.notgreysquare { 
    height: 100%; 
} 

基本的に私は、このナビゲーションバーを持っています、その中に各ナビゲーションタブで作業しようとしています。アイデアは、灰色の四角形の中にリンクの最初の2文字を入れて、その文字が四角形の右下隅にあり、残りの単語が灰色の四角形の外側にあったが、最初の2文字。上記の画像を参照して、私が探しているものを理解してください（色を無視することができます）。 私はここで見つけたもう一つのフィドルを次のように始めました：https://jsfiddle.net/josedvq/38Tnx/ EXPLOREという言葉のうち、EXは確かに正しいスパンに置かれていますが、グレイスクエアの内容は何らかの理由で少なくとも視覚的には子どもでもないタイトルのPLORE部分が含まれており、なぜそれが起こるのか理解できません。 本当に助けていただければ幸いです。

Answer 1

は、あなたが探しているものは以下です：

https://jsfiddle.net/3047p0wy/3/

HTML

<nav class="navbar navbar-default"> 
     <div class="container-fluid" id="navigation-bar"> 
     <div class="navbar-header"> 
      <div class="headerspace"> 
      <a href="http://google.com"> 
       <span>The title</span> 
      </a> 
      </div> 
     </div> 
     <div class="collapse navbar-collapse" id="navbar-collapse-element"> 
      <ul class="nav navbar-nav navbar-right" id="tabs"> 
      <li> 
       <div class="tab"> 
       <a href="http://google.com"> 
        <div style="display: block;"> 

        <span class="greysquare-content pull-left">EX</span> 
        <span class="notgreysquare pull-left">PLORE</span> 
        </div> 
       </a> 
       </div> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

とCSS

.navbar { 
    height: 100%; 
    margin-top: 10px; 
    background-color: inherit; 
    border: none; 
} 

.navbar-header { 
    height: 100%; 
    width: 30%; 
} 

#navigation-bar { 
    height: 100%; 
} 

#navbar-collapse-element { 
    height: 100%!important; 
} 

#tabs { 
    max-height: 100%; 
} 

.tabspace { 
    max-height: 100%; 
    width: 70%; 
} 

.greysquare-content { 
    background-color: #CCCCCB; 
    padding: 5px; 
} 

.notgreysquare { 
    padding: 5px 5px 5px 0px; 
}