html - Firefox 向右浮动时将内容推出 div

Question

我目前正在为我的网站设计导航栏，我在 Firefox 中遇到了一个问题。我的 Logo 在左边，导航内容在右边，但是整个导航内容都被推出了导航 div(仅在 Firefox 上)。我该怎么做才能修复它？

火狐: http://i.cubeupload.com/OoAJIe.png

Chrome : http://i.cubeupload.com/QXo2KS.png

这是我的 HTML:

  <div class="nav" id="nav">
    <div class="nav_content">

      <ul>
        <li class="logo"><a href="index.php"><img src="images/Spendr.png" /></a></li>

        <li class="tab btn"><a href="panel/index.php"><button>Kurv: 0</button></a></li>
        <li class="tab txt"><a href="#udbetaling">Nye varer</a></li>
        <li class="tab txt"><a href="#features">Udsalg</a></li>
        <li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
      </ul>

    </div>
  </div>

这是我的 CSS:

.nav {
    width: 100%;
    background: #262626;
    transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
    position: fixed /*fixed*/;
    z-index: 999;
    height: 71px;
    float: left;
}

.nav_content {
    max-width: 1150px;
    width: 90%;
    height: 100%;
    background: none;
    margin: 0 auto;
    white-space: nowrap;
}

.nav ul li, .nav ul li a {
    list-style: none;
    text-decoration: none;
    display: inline-block;
} .nav .tab{
    float: right;
    font-family: DroidSans, sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.3s;
}

.txt a {
    float: right;
    font-family: DroidSans, sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.3s;
    height: 100%;
    padding-top: 26px;
    box-sizing: border-box;
    transition: background 0.3s;
}

.txt a:hover {
    cursor: pointer;
    background: #1A1A1A;
}
.nav .tab { border-radius: 3px; }
.nav .txt a { 
    padding-left:18px;
    padding-right: 18px;
} 

.logo img {
    height: 36px;
    width: auto;
    margin-top: 18px;
    float: left;
}

Answer 1

由于您将 .tab 元素向右浮动，因此添加 .logo { float: left; } 这将使列表项全部 float 在菜单的任一侧。

.nav {
  width: 100%;
  background: #262626;
  transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
  position: fixed/*fixed*/
  ;
  z-index: 999;
  height: 71px;
  float: left;
}

.nav_content {
  max-width: 1150px;
  width: 90%;
  height: 100%;
  background: none;
  margin: 0 auto;
  white-space: nowrap;
}

.nav ul li,
.nav ul li a {
  list-style: none;
  text-decoration: none;
  display: inline-block;
}

.nav .tab {
  float: right;
  font-family: DroidSans, sans-serif;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.3s;
}

.txt a {
  float: right;
  font-family: DroidSans, sans-serif;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.3s;
  height: 100%;
  padding-top: 26px;
  box-sizing: border-box;
  transition: background 0.3s;
}

.txt a:hover {
  cursor: pointer;
  background: #1A1A1A;
}

.nav .tab {
  border-radius: 3px;
}

.nav .txt a {
  padding-left: 18px;
  padding-right: 18px;
}

.logo img {
  height: 36px;
  width: auto;
  margin-top: 18px;
  float: left;
}

.logo {
  float: left;
}

<div class="nav" id="nav">
  <div class="nav_content">

    <ul>
      <li class="logo">
        <a href="index.php"><img src="images/Spendr.png" /></a>
      </li>

      <li class="tab btn"><a href="panel/index.php"><button>Kurv: 0</button></a></li>
      <li class="tab txt"><a href="#udbetaling">Nye varer</a></li>
      <li class="tab txt"><a href="#features">Udsalg</a></li>
      <li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
    </ul>

  </div>
</div>

您还可以将菜单更改为 flex 布局，并在 .logo 上使用 auto 边距来分隔元素。

.nav {
  width: 100%;
  background: #262626;
  transition: background 0.5s, border 0.5s, color 0.5s, height 0.5s, padding-top 0.3s, opacity 0.5s;
  position: fixed/*fixed*/
  ;
  z-index: 999;
  height: 71px;
  float: left;
}

.nav_content {
  max-width: 1150px;
  width: 90%;
  height: 100%;
  background: none;
  margin: 0 auto;
  white-space: nowrap;
}

.nav ul li,
.nav ul li a {
  list-style: none;
  text-decoration: none;
  display: inline-block;
}

.nav .tab {
  float: right;
  font-family: DroidSans, sans-serif;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.3s;
}

.txt a {
  float: right;
  font-family: DroidSans, sans-serif;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.3s;
  height: 100%;
  padding-top: 26px;
  box-sizing: border-box;
  transition: background 0.3s;
}

.txt a:hover {
  cursor: pointer;
  background: #1A1A1A;
}

.nav .tab {
  border-radius: 3px;
}

.nav .txt a {
  padding-left: 18px;
  padding-right: 18px;
}

.logo img {
  height: 36px;
  width: auto;
  margin-top: 18px;
  float: left;
}

.nav ul {
  display: flex;
}

.logo {
  margin-right: auto;
}

<div class="nav" id="nav">
  <div class="nav_content">

    <ul>
      <li class="logo">
        <a href="index.php"><img src="images/Spendr.png" /></a>
      </li>

      <li class="tab btn"><a href="panel/index.php"><button>Kurv: 0</button></a></li>
      <li class="tab txt"><a href="#udbetaling">Nye varer</a></li>
      <li class="tab txt"><a href="#features">Udsalg</a></li>
      <li class="tab txt" id="kategorierMenu"><a>Kategorier</a></li>
    </ul>

  </div>
</div>