border-bottom появляется поверх элемента

Я не могу понять, почему моя нижняя граница не появится под моей навигационной панелью. Он работал нормально, пока я не добавил #topheader, поэтому считаю, что это моя проблема. Если да, есть ли более эффективный способ получить черный ящик сверху? моток вы за любую помощьborder-bottom появляется поверх элемента

<header> 
<div id="topheader"> 
<div class="wrapper"> 
<div id="logo"> 
    <h1>TheWay</h1> 
</div> 
</div> 
</div> 


<!-- Navigation Bar --> 

<div class="wrapper"> 

<div id="nav_bar"> 

<nav> 

<a href="home.html">Home</a> 

<a href="blog.html">Blog</a> 

<a href="music.html">Music</a> 

<a href="events.html">Events</a> 

<a href="contact.html">Contact</a> 
</nav> 
    </div> 
</div> 
</header>

Вот полный код: http://tinker.io/a31d6/2

источник

2013-05-17 Waymond

Пожалуйста, всегда включают в себя соответствующий код в вопрос. –

Я не вижу правил 'border-bottom' в вашем CSS. – j08691

Я должен включить проблему, а не объяснять ее. Извини за это. – Waymond

Я не могу видеть границы дна на вашем примере на всех, но при условии, что вы добавляете его в #nav_bar , попробуйте также добавить переполнение: скрыто на #nav_bar. Надеюсь, это сделает то, что вы хотите.

источник

2013-05-17 14:19:01 kiwimind

Kiwimind, СПАСИБО! Это сделал трюк. Могу ли я спросить вас, как вы знали, что это будет трюк и почему я должен был это сделать? Еще раз спасибо. – Waymond

Если у вас есть поплавки внутри элемента (например, у вас внутри вашего #nav_bar div), плавающие элементы удаляются из потока, поэтому div эффективно не имеет размера, а это означает, что нижний край будет отображаться в верхней части , Когда вы добавляете в overflow: hidden, он гарантирует, что div обертывает все элементы внутри него, включая float. Я надеюсь в этом есть смысл. – kiwimind

Думаю, я понимаю. Итак, как только я добавляю float к элементу, «дети» внутри элемента уходят, а родительский элемент заканчивается свертыванием? – Waymond

Там, кажется, проблема с float: left;

#nav_bar nav a { 
    /* ... */ 
    float: left; 
    /* ... */ 
}

Вы можете попробовать заменить поплавок с display: inline-block;

источник

2013-05-17 14:25:13 catcyborg

Спасибо за предложение! – Waymond

border-bottom появляется поверх элемента

ответ

Смежные вопросы