Firefox poussant le contenu hors de div quand flottant à droite

Question

Je suis en train de concevoir la barre de navigation pour mon site Web et j'ai rencontré un problème dans Firefox. J'ai mon logo sur la gauche et mon contenu de navigation vers la droite, mais le contenu de navigation entier est expulsé de la div nav (uniquement sur Firefox). Que puis-je faire pour le réparer?

Firefox: http://i.cubeupload.com/OoAJIe.png

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

Voici mon 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> 

Voici mon 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

Puisque vous êtes flottant le .tab éléments à droite, ajouter .logo { float: left; } et que les éléments de la liste flottent de chaque côté du menu.

.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>

Vous pouvez également changer le menu à une mise en page flex et utiliser une marge auto sur .logo pour séparer les éléments.

.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>