在導航欄中垂直對齊鏈接和徽標

我無法垂直對齊鏈接和列表中的徽標任何想法我可以修復它？以下是codepen中的代碼。 http://codepen.io/tacoxlegendary/pen/VjXqkA?editors=1100 在導航欄中垂直對齊鏈接和徽標

<body> 
<nav> 
    <div class="wrapper "> 

     <ul class="cf"> 
      <li id="logo">LOGO</li> 

      <li>SIGN IN</li> 
      <li>LOCTION</li> 
      <li>TEAM</li> 
      <li>ABOUT</li> 
     </ul> 
    </div> <!-- wrapper end --> 
</nav>

.wrapper { 
max-width: 1120px; 
margin: 0 auto; 
} 
nav { 
    background-color: #F7FDFE; 
} 

nav ul li { 
    display: inline-block; 
    color: #45494D; 
    float: right; 
    padding: 10px; 
    font-size: 14px; 
} 
nav ul #logo { 
    float: left; 
    font-size: 30px; 
}

來源

2016-07-22 Temo Vargas

你期望究竟是什麼..？ –

你能清楚它應該是什麼樣子？ –

你能畫出你需要的佈局和文章嗎？（可能在油漆中） – taruntejae

添加padding:0到nav ul #logo

.wrapper { 
 
max-width: 1120px; 
 
margin: 0 auto; 
 
} 
 
nav { 
 
    background-color: #F7FDFE; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    color: #45494D; 
 
    float: right; 
 
    padding: 10px; 
 
    font-size: 14px; 
 
} 
 
nav ul #logo { 
 
    float: left; 
 
    font-size: 30px; 
 
    padding:0; 
 
}

<nav> 
 
    <div class="wrapper "> 
 

 
     <ul class="cf"> 
 
      <li id="logo">LOGO</li> 
 

 
      <li>SIGN IN</li> 
 
      <li>LOCTION</li> 
 
      <li>TEAM</li> 
 
      <li>ABOUT</li> 
 
     </ul> 
 
    </div> <!-- wrapper end --> 
 
</nav>

來源

2016-07-22 04:32:49 Rohit

一個簡單的方法來中心在C導航欄和標識導航欄的輸入是設置一個高度導航欄，並給予相同的值的line-height李像

nav { 
height: 70px; 
} 
ul.cf { 
line-height: 70px; 
}

來源

2016-07-22 04:34:52

在導航欄中垂直對齊鏈接和徽標

回答

相關問題