您好，我正在尝试设置我在网上找到的选项卡示例的样式。 这是示例:
<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;
}
之前(所选标签与内容合并)
之后(选定的标签有一个底部边框)
如何解决这个问题？
最佳答案
这是因为您要将 overflow:hidden 添加到 header and
你还没有清除 float
下面是解决方案
清除:两者
这里是clear的定义
基于 float 的布局的一个常见问题是 float 容器不想向上拉伸(stretch)以容纳 float 。如果你想添加，比如说，围绕所有 float 的边框，你必须以某种方式命令浏览器一直拉伸(stretch)容器。
这是您的解决方案和快速修复
“清理”，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
希望对你有帮助:)
关于选定选项卡的 css 选项卡问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21672804/