2016-07-22 2 views
0

У меня возникли проблемы с вертикальным выравниванием ссылок и логотипа внутри списка, какой-либо идеи, что я могу исправить? Код пользователя 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; 
} 
+0

что вы ожидаете именно ..? –

+0

Не могли бы вы понять, как это должно выглядеть? –

+0

Можете ли вы нарисовать свой макет и сообщение? (возможно, в краске) – taruntejae

ответ

0

Добавить 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>

0

простой способ центрирования Navbar и логотип в с введите в навигационной панели, чтобы установить высоту NavBar и дать такое же значение, как линию высоту для лития как

nav { 
height: 70px; 
} 
ul.cf { 
line-height: 70px; 
} 
Смежные вопросы