Weird Bottom Margin на моей навигационной панели

Question

Кажется, что нижний край прикреплен к .nav-wrapper> ul, но кроме того, что он дает определенную высоту (чего я не хочу делать), я не могу изобразить как избавиться от него. Может ли кто-нибудь помочь мне затянуть это?

По моим известково она должна покоиться на дне Ли ...

Если бы обернуть ссылку в Google URL Shortener как он хотел, чтобы я включать код ... который не должно было произойти из-за это много.

My CodePen Example

Answer 1

Вашей проблема заключается в затруднительном разносе вас на .nav-обертке улей элемента:

.nav-wrapper ul:after { 
    content: ''; 
    display: inline-block; 
    width: 100%; 
} 

Это создает элемент ниже список ваших элементов и создает, что пустое пространство. Вы можете увидеть это в действии, изменив это:

.nav-wrapper ul:after { 
    content: ''; 
    display: block; 
    width: 100%; 
    height:0px; 
} 

Но вы потеряете хороший даже интервал у вас есть.

К сожалению, этот способ разделения ваших li элементов имеет побочный эффект пустого пространства внизу, поэтому ваш единственный вариант, чтобы избавиться от этого пространства - это изменить то, как вы располагаете элементы li.

я предлагаю следующий метод:

nav-wrapper li { 
    display: block; 
    text-align: center; 
    background: none; 
    transition: background-color 300ms ease; 
    width: 16.6666667%; 
    float: left; 
} 

.nav-wrapper a { 
    position: relative; 
    display: inline-block; 
    width: 128px; 
    text-decoration: none; 
    color: white; 
    padding: 10px 0; 
    background: #34495e; 
    transition: background-color 300ms ease; 
} 

.nav-wrapper li a:hover { 
    background: #d5051d; 
}