Проблема с вкладкой css с выбранной вкладкой

Привет Я пытаюсь создать образец вкладки, который я нашел в сети. здесь образец:Проблема с вкладкой css с выбранной вкладкой

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Tabs 2</title> 
    <style> 
    body { 
     font: 0.8em arial, helvetica, sans-serif; 
    } 

    #header ul { 
     list-style: none; 
     padding: 0; 
     margin: 0; 
    } 

    #header li { 
     float: left; 
     border: 1px solid; 
     border-bottom-width: 0; 
     margin: 0 0.5em 0 0; 
    } 

    #header a { 
     display: block; 
     padding: 0 1em; 
    } 

    #header #selected { 
     position: relative; 
     top: 1px; 
     background: white; 
    } 

    #content { 
     border: 1px solid; 
     clear: both; 
    } 

    h1 { 
     margin: 0; 
     padding: 0 0 1em 0; 
    } 
    </style> 
</head> 

<body> 

<div id="header"> 
    <ul> 
     <li><a href="#">This</a></li> 
     <li id="selected"><a href="#">That</a></li> 
     <li><a href="#">The Other</a></li> 
     <li><a href="#">Banana</a></li> 
    </ul> 
</div> 

<div id="content"> 
    <p>Ispum schmipsum.</p> 
</div> 



</body> 

</html>

проблема я хочу, чтобы добавить цвет фона для заголовка и установить его ширину до 100%. увидеть разницу, когда я добавить этот CSS код:

#header{ 
width:100%; 
background-color:#b6ff00; 
overflow:hidden; 
}

до (выбранная вкладка слита с содержанием)

befor

после (выбранной вкладки имеет границ снизу)

after

как исправить это?

источник

2014-02-10 mahdi gh

Отметьте мой ответ :) –

Это потому, что вы добавляете overflow:hidden в заголовок и вы не очистили поплавки

ниже решения

Clear: как

Вот определение ясно

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

Вот ваш решение и Быстрый Фикс

"Выемка" 21 века стиль

ul:after { 
    clear: both !important; 
    content: "."; 
    display: block; 
    float: none; 
    font-size: 0; 
}

Вот Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/

Пожилым Решение

HTML

<div id="header"> 
    <ul> 
     <li><a href="#">This</a></li> 
     <li id="selected"><a href="#">That</a></li> 
     <li><a href="#">The Other</a></li> 
     <li><a href="#">Banana</a></li> 
     <li class="clear"></li> 
    </ul> 
</div> 

<div id="content"> 
    <p>Ispum schmipsum.</p> 
</div>

CSS

#header { 
    background-color: #B6FF00; 
    overflow: visible; 
    position: relative; 
    top: 1px; 
    width: 100%; 
} 
.clear { clear : both; float:none !important}

Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/

Я только показал быстрый метод клирингового Есть много других

Вы можете увидеть больше способов http://www.quirksmode.org/css/clearing.html

Надеюсь, это поможет вам :)

источник

2014-02-10 09:10:03

благодарит миллион, но проблема в том, что вся верхняя граница содержимого удалена таким образом, я хочу просто удалить часть, которая конфликтует с выбранной вкладкой –

Я обновил свой ответ, проверьте его :) –

большое спасибо, он работает –

Проблема с вкладкой css с выбранной вкладкой

ответ

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