为什么我的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%; 
} 

基本上，我有这样的导航栏，并在里面我试图与每个导航选项卡。这个想法是把一个链接的前两个字母放在一个灰色的正方形里面，这样这个字母就在正方形的右下角，然后这个单词的其余部分在灰色正方形的外面，但与第一个两封信。看到上面的图片了解我在找什么（可以忽略颜色）。 我从下面的另一个小提琴开始，在这里找到：https://jsfiddle.net/josedvq/38Tnx/ 因此，正如你所看到的，EXPLORE这个词的确位于正确的跨度，但由于某些原因，greysquare内容至少在视觉上包括标题的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; 
}