Firefox가 오른쪽으로 떠있을 때 div의 콘텐츠를 밀어 내기

Question

현재 내 웹 사이트의 탐색 모음을 디자인 중이며 Firefox에서 문제가 발생했습니다. 왼쪽에는 내 로고가 있고 오른쪽에는 내 탐색 내용이 있지만 전체 탐색 내용은 nav div (Firefox에만 있음)에서 밀어 내고 있습니다. 문제를 해결하려면 어떻게해야합니까?

파이어 폭스 : http://i.cubeupload.com/OoAJIe.png

크롬 : 여기 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; }을 추가하면 목록 항목이 모두 메뉴의 양쪽에 떠있게됩니다.

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