如何用纯 HTML/CSS 制作选项卡
我正在尝试使用纯 HTML/CSS 制作选项卡，它在所有主要浏览器中都运行良好。除了 IE，7 和 8 之外。
如果我不将 display: table 添加到 ul，则内容在每个浏览器中都不会换行。但是，即使我添加了它，IE 也不会在新行中显示它。对此我能做什么？有没有更好的方法在纯 HTML/CSS 中制作选项卡？
<!DOCTYPE>
<html>
<head>
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: yellow;
}
ul.tabs>li.selected {
background-color: orange;
}
div.content {
border: 1px solid black;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="selected">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="content">
This should really appear on a new line.
</div>
</body>
</html>
I'm trying to do Tabs with pure HTML/CSS, and it works nice in all major browsers. Except IE, both 7 and 8.
If I don't add display: table to the ul, the content is not on a new line in every browser. However, IE doesn't display it in a new line even after I add that. What can I do about that? Is there a better way to make tabs in pure HTML/CSS?
<!DOCTYPE>
<html>
<head>
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: yellow;
}
ul.tabs>li.selected {
background-color: orange;
}
div.content {
border: 1px solid black;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="selected">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div class="content">
This should really appear on a new line.
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
由于浮动的
元素，您的元素的高度为零。尝试添加
ul { Overflow: auto; }和div.content { 明确：两者； }到你的 CSSBecause of the floated
<li>elements your<ul>element is zero height.Try adding
ul { overflow: auto; }anddiv.content { clear: both; }to your CSS这个（jsfiddle）对你有用吗？
所做的更改：
display: table;从 ul.tabs 中float:leftlidisplay:inline-block.tabs李的Does this (jsfiddle) work for you?
Changes made:
display: table;from ul.tabsfloat:leftfrom ul.tabs li'sdisplay:inline-blockto ul.tabs li's我总是只是“浮动” li 元素：
I always just "float" the
lielements:我用过这种方法，效果很好。它使用内联列表： http://nontroppo.org/test/tab1.html
更新：上面已经过时了。如果我现在要回答这个问题，我建议使用此处概述的 CSS 目标伪类方法： http://www.w3.org/Style/Examples/007/target。还有其他方法，例如与检查的伪类结合使用（隐藏）单选按钮，但使用目标似乎是最干净的。
I've used this approach which works well. It uses an inline list: http://nontroppo.org/test/tab1.html
UPDATE: Above is outdated. If I were to answer the question now I would suggest using the CSS target pseudo-class method outlined here: http://www.w3.org/Style/Examples/007/target. There are other methods like using (hidden) radio buttons in combo with the checked pseudo-class but using target seems the cleanest.