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

Question

我正在尝试使用纯HTML / CSS进行制表符，它在所有主要的浏览器中都很好用。 除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; } ul { overflow: auto; }和div.content { clear: both; } div.content { clear: both; }到您的CSS

Answer 2

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

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

Answer 3

我总是只是“浮动” li元素：

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

Answer 4

这个（jsfiddle）对您有用吗？

所做的更改：

移除display: table; 来自ul.tabs
从ul.tabs li的中删除了float:left
向ul.tabs li's添加了display:inline-block

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

问题描述

4 个解决方案

解决方案1
1 已采纳 2011-02-22 08:03:00

解决方案2
0 2011-02-22 08:03:19

解决方案3
0 2011-02-22 08:11:26

解决方案4
0 2011-02-22 08:15:28

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

问题描述

4 个解决方案

解决方案1 1 已采纳 2011-02-22 08:03:00

解决方案2 0 2011-02-22 08:03:19

解决方案3 0 2011-02-22 08:11:26

解决方案4 0 2011-02-22 08:15:28

解决方案1
1 已采纳 2011-02-22 08:03:00

解决方案2
0 2011-02-22 08:03:19

解决方案3
0 2011-02-22 08:11:26

解决方案4
0 2011-02-22 08:15:28