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这个词中，EX确实放在了正确的范围内，但由于某种原因，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;
}

为什么我的div还包括一个不是它的孩子的div？

1 个答案: