Question

我在网页导航栏中遇到一个奇怪的问题，我做了一个复制问题的小提琴： Issue replication

  <header>
    <div class="navbar-fixed">
      <nav style="background: #F30617" role="navigation">
        <div class="nav-wrapper">
          <a id="logo-container" href="@Url.Action(" Main ", "Home ")" class="brand-logo">
            <div class="flow-text title" style="white-space: nowrap;">Planning Cycle Dashboard</div>
          </a>
          <div class="switch" style="float: right">
            <label>
              <input type="checkbox" class="upsellActiveToggle" checked="checked"><span class="lever">                            
                         <span class="off center-align" style="color: white;">Today</span>
              <span class="on center-align" style="color: white;">Weekend</span>
              </span>
            </label>
          </div>



        </div>

      </nav>
    </div>
  </header>

  <main>
    <div class="switch">
      <label>
        <input type="checkbox" class="upsellActiveToggle" checked="checked"><span class="lever">
                    <span class="off">Today</span>
        <span class="on">Weekend</span>
        </span>
      </label>
    </div>
  </main>

正如您所看到的，我想要实现的是导航栏下方的开关。

我的问题是......为什么如果它在导航栏下方的开关上工作，它不在导航栏内的那个上？它具有相同的结构......它应该工作！不知道为什么它会把文字推到开关外面！

有什么想法吗？

Answer 1

首先，你的html中有一个拼写错误：

<span class="off center-align" style="color: white;">Today</span>
   <span class="on center-align" style="color: white;"></span>
   Weekend
</span>

请参阅Weekend超出.on范围？如果你的代码缩进得更好，你就不会错过它。

先修复它，然后添加：

.switch label .lever, .switch label .lever span {line-height:20px}

它可以解决问题，因为没有它，它们会从line-height:56px继承nav。

Navbar的Css bug

1 个答案: