保持導航欄中包含的li元素

Question

大多數情況下，我的導航欄的行爲符合我的要求，但當我靠近600px的屏幕大小時，我的li元素開始超出導航欄的界限，意圖始終保持在那裏。

將事物保持在固定的位置是我在其他幾個領域也有點掙扎的地方。下面是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元素將需要在某個時候包裝成兩行（除非你找到另一種解決方案，像一個導航圖標以及僅在點擊或鼠標懸停時出現的隱藏垂直菜單）。

你必須改變你的導航欄背景護住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>