導航欄中的徽標正在將它推下來

我在爲我的網站構建導航欄時遇到了一些問題。我有一個徽標對齊右側，但它迫使李的其餘部分對齊到徽標的底部。我怎樣才能使列表項目水平對齊中心。導航欄中的徽標正在將它推下來

<nav class="main_nav"> 
      <ul> 
       <li><a href="#home"><img class="logo" alt="logo" src="images/logo.svg"></a></li> 
       <li class="list_item"><a href="#about" class="li_nav">About Us</a></li> 
       <li class="list_item"><a href="#trips" class="li_nav">Trips</a></li> 
       <li class="list_item"><a href="#projects" class="li_nav">Projects</a></li> 
       <li class="list_item"><a href="#donations" class="li_nav">Donations</a></li> 
       <li class="list_item"><a href="#sponsors" class="li_nav">Sponsors</a></li> 
       <li class="list_item"><a href="#contact" class="li_nav">Contact</a></li> 
      </ul> 
    </nav>

CSS

.main_nav { 
    width: 100%; 
    display: inline-block; 
    background-color: white; 
    padding-bottom: .5em; 
} 

.li_nav { 
    color: #939598; 
    -webkit-font-smoothing: antialiased!important; 
    font-size: 1.05em; 
    padding-right: 2.5em; 
    display: inline; 
} 

.logo { 
    min-width: 115px; 
    max-width: 125px; 
    padding-left: 2em; 
    padding-top: .25em; 
    padding-right: 3em; 
    position: relative; 
} 

.list_item { 
    display: inline; 
}

來源

2016-10-14 Sailor Jerry

在導航欄中加上ur標誌div –

@MandarSant當我這樣做時它pu在徽標下方放置導航欄，我將如何對齊它們？ –

.main_nav { 
 
    width: 100%; 
 
    display: inline-block; 
 
    background-color: white; 
 
    padding-bottom: .5em; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    float:left; 
 
} 
 
li .li_nav{ 
 
    color: #939598; 
 
    -webkit-font-smoothing: antialiased!important; 
 
    font-size: 1.05em; 
 
    padding-right: 2.5em; 
 
    display:block; 
 
    line-height:50px 
 
    
 
} 
 

 
.logo { 
 
    padding-left: 2em; 
 
    padding-right: 3em; 
 
    position: relative; 
 
}

<nav class="main_nav"> 
 
    <ul> 
 
     <li class="logo"><a href="#home"><img alt="logo" src="http://placehold.it/50x50"></a></li> 
 
     <li class="list_item"><a href="#about" class="li_nav">About Us</a></li> 
 
     <li class="list_item"><a href="#trips" class="li_nav">Trips</a></li> 
 
     <li class="list_item"><a href="#projects" class="li_nav">Projects</a></li> 
 
     <li class="list_item"><a href="#donations" class="li_nav">Donations</a></li> 
 
     <li class="list_item"><a href="#sponsors" class="li_nav">Sponsors</a></li> 
 
     <li class="list_item"><a href="#contact" class="li_nav">Contact</a></li> 
 
    </ul> 
 
</nav>

對於對準水平中心，取決於你的圖像尺寸，並相應地改變它的行高

來源

2016-10-14 17:59:07

加浮動：右鍵屬性到您的類「標誌」

.logo{ 
float:right; 
}

也是一流的「LIST_ITEM」添加到標識李容器

來源

2016-10-14 17:31:02

不會只是將徽標推到右側並將導航欄保留在其下方？ –

我認爲它不是我剛剛嘗試過的，它的工作 –

你是對的，我忘了提及我將list_item類添加到包含標誌的li –

是這樣的outpur ru期待

在Jsbin

檢查輸出修改烏爾CSS如下

li{ 
list-style:none; 
float:right; 
margin-right:100px; 
} 

.list_item{ 
position:relative; 
top:-35px; 
}

來源

2016-10-14 17:39:26

導航欄中的徽標正在將它推下來

回答

相關問題