Question

我正在尝试使用纯HTML / CSS制作Tabs，并且它在所有主流浏览器中都很好用。除了IE，7和8都是。

如果我没有将display: table添加到 ul ，则每个浏览器中的内容都不在新行中。但是，即使我添加了IE，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>

Answer 1

由于浮动的<li>元素，您的<ul>元素的高度为零。

尝试将ul { overflow: auto; }和div.content { clear: both; }添加到您的CSS

Answer 2

我使用过这种效果很好的方法。它使用内联列表：http://nontroppo.org/test/tab1.html

更新：上面已经过时了。如果我现在回答这个问题，我建议使用这里概述的CSS目标伪类方法：http://www.w3.org/Style/Examples/007/target。还有其他方法，比如使用（隐藏）单选按钮与已检查的伪类组合，但使用目标似乎是最干净的。

Answer 3

我总是“浮动”li元素：

ul.tabs{list-style: none;}
ul.tabs li{float:left;}

Answer 4

this（jsfiddle）适合你吗？

所做的更改：

从ul.tabs

display: table;

从ul.tabs li's

float:left

将display:inline-block添加到ul.tabs li's

如何使用纯HTML / CSS制作标签

4 个答案: