li要素をnavbarに保持する

Question

ほとんどの場合、私のnavbarは必要に応じて動作しますが、私は600pxの画面サイズに近づくにつれて、私のli要素はnavbarとmyの境界の外側に移動し始めますそれらを常にそこに閉じ込める意思。

固定された位置に物事を維持することは、他のいくつかの領域で少しでも苦労していることです。ここではHTMLは次のとおりです。ここで

<header> 
     <nav> 
     <div class="header-black"> 
      <img src="resources/img/logo-header.png" alt="logo" class="logo"> 
      <i class="ion-navicon-round icon-small"></i> 
     </div> 
     <div class="header-pages"> 
      <ul class="main-nav"> 
      <li><i class="ion-ios-person icon-small"></i> 
       <a href="#single-attendee"> 
       <p>Single Atendee</p> 
       </a> 
      </li> 
      <li><i class="ion-ios-people icon-small"></i> 
       <a href="#group-tickets"> 
       <p>Group Tickets</p> 
       </a> 
      </li> 
      <li><i class="ion-arrow-move icon-small"></i> 
       <a href="#investors"> 
       <p>Investors</p> 
       </a> 
      </li> 
      <li><i class="ion-location icon-small"></i> 
       <a href="#startups"> 
       <p>StartUps</p> 
       </a> 
      </li> 
      </ul> 
     </div> 
     </nav> 
    </header> 

は、関連するCSSです：あなたは別の解決策を見つけるしない限り、

.header-pages { 
    height: 60px; 
    background-color: #F6FBFC; 
    text-align: center; 
} 

.header-pages nav ul { 
    white-space: nowrap; 
} 

.header-pages nav ul li { 
    min-width: 55px; 
} 

.header-pages .main-nav li { 
    display: inline-block; 
    margin-left: 80px; 
    padding: 5px 0; 
    color: #cccccc; 
    text: #cccccc; 
    text-transform: uppercase; 
    font-size: 30%; 
} 


.header-pages .main-nav li p { 
    padding-top: 7px; 
    text-decoration: none; 
    font-size: 100%; 
    float:right; 
} 



.header-pages .main-nav li:hover a, 
.header-pages .main-nav li:hover i, 
.header-pages .main-nav li:hover p 
{ 
    color: #0198E1; 
} 


.header-pages .main-nav li a:focus i, 
.header-pages .main-nav li a:focus p 
{ 
    color: #0198E1; 
} 

Answer 1

のli要素は、NAV-アイコンのように、（いくつかの点で2行にラップする必要があります。クリックまたはマウスオーバー時にのみ表示される非表示の垂直メニュー）。

あなたのli要素をカバーするためにあなたのナビゲーションバーの背景用に変更する必要が唯一のものは、それがその内容に応じて高くなることを可能にするであろう、「最小の高さ」への「高さ」プロパティを変更することです：

.header-pages { 
 
    min-height: 60px; 
 
    background-color: #F6FBFC; 
 
    text-align: center; 
 
} 
 

 
.header-pages nav ul { 
 
    white-space: nowrap; 
 
} 
 

 
.header-pages nav ul li { 
 
    min-width: 55px; 
 
} 
 

 
.header-pages .main-nav li { 
 
    display: inline-block; 
 
    margin-left: 80px; 
 
    padding: 5px 0; 
 
    color: #cccccc; 
 
    text: #cccccc; 
 
    text-transform: uppercase; 
 
    font-size: 30%; 
 
} 
 

 

 
.header-pages .main-nav li p { 
 
    padding-top: 7px; 
 
    text-decoration: none; 
 
    font-size: 100%; 
 
    float:right; 
 
} 
 

 

 

 
.header-pages .main-nav li:hover a, 
 
.header-pages .main-nav li:hover i, 
 
.header-pages .main-nav li:hover p 
 
{ 
 
    color: #0198E1; 
 
} 
 

 

 
.header-pages .main-nav li a:focus i, 
 
.header-pages .main-nav li a:focus p 
 
{ 
 
    color: #0198E1; 
 
}

<header> 
 
     <nav> 
 
     <div class="header-black"> 
 
      <img src="resources/img/logo-header.png" alt="logo" class="logo"> 
 
      <i class="ion-navicon-round icon-small"></i> 
 
     </div> 
 
     <div class="header-pages"> 
 
      <ul class="main-nav"> 
 
      <li><i class="ion-ios-person icon-small"></i> 
 
       <a href="#single-attendee"> 
 
       <p>Single Atendee</p> 
 
       </a> 
 
      </li> 
 
      <li><i class="ion-ios-people icon-small"></i> 
 
       <a href="#group-tickets"> 
 
       <p>Group Tickets</p> 
 
       </a> 
 
      </li> 
 
      <li><i class="ion-arrow-move icon-small"></i> 
 
       <a href="#investors"> 
 
       <p>Investors</p> 
 
       </a> 
 
      </li> 
 
      <li><i class="ion-location icon-small"></i> 
 
       <a href="#startups"> 
 
       <p>StartUps</p> 
 
       </a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
    </header>