如何使用纯HTML/CSS制作选项卡
我正在尝试使用纯HTML/CSS制作选项卡，它在所有主流浏览器中都很好地工作。除了IE，都是7和8 如果我没有将如何使用纯HTML/CSS制作选项卡,html,css,tabs,Html,Css,Tabs,我正在尝试使用纯HTML/CSS制作选项卡，它在所有主流浏览器中都很好地工作。除了IE，都是7和8 如果我没有将display:table添加到ul，则内容不会出现在每个浏览器的新行上。然而，即使我添加了IE，它也不会显示在新行中。我能做些什么？有没有更好的方法在纯HTML/CSS中创建选项卡 <!DOCTYPE> <html> <head> <style type="text/css"> ul.tabs
display:table<!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>
ul标签{
显示：表格；
列表样式类型：无；
保证金：0；
填充：0；
}
ul.tabs>li{
浮动：左；
填充：10px；
背景颜色：浅灰色；
}
ul.tabs>li：悬停{
背景颜色：黄色；
}
ul.选项卡>li.已选定{
背景颜色：橙色；
}
部门内容{
边框：1px纯黑；
}
- 一个
- 两个
- 三
这应该出现在新的一行上。
由于浮动的元素，您的
元素高度为零
尝试将ul{overflow:auto；}
和div.content{clear:both；}
添加到CSS中我使用了这种方法，效果很好。它使用内联列表：
更新：以上内容已过时。如果我现在要回答这个问题，我建议使用此处概述的CSS目标伪类方法：。还有其他方法，比如在combo中使用（隐藏）单选按钮和选中的伪类，但使用target似乎是最干净的。我总是“浮动”li
元素：
ul.tabs{list style:none；}
ul.tabs li{float:left；}
（jsfiddle）对您有用吗
所作的修改：
删除显示：表格来自ul.tabs
从ul.li的标签中删除了浮动：左
在ul.li标签中添加了显示：内联块
如果我只有一列（如示例中所示），但我有两列布局（很抱歉，问题中没有包括这一点），那么这是可行的。如果我使用“clear:left”，它可以工作，但是选项卡与第二列的高度相同。嗨，这不是一个选项卡，因为它为每个选项卡加载单独的页面，它会使站点变慢，超出我？OP没有明确说明是否需要在同一页面中加载。看看用户代码示例——这正是他们想要的。我也不同意这会使网站速度变慢，因为你只加载了你正在查看的标签所需的内容。如果你从来不看表2和表3呢？你白白装了它们。这实际上取决于选项卡的实现，即它们是用于主要导航（使用单独的页面）还是补充内容（将所有选项卡内容放在同一页面中）。。。。除此之外，如果我现在要回答这个问题，我建议使用这里概述的CSS目标伪类方法：-这个问题是两年前提出的@CSS目标伪类是一种很好的方法。你也许应该把它作为一个单独的答案加上。