html - 如何使用纯 html/css制作标签

  显示原文与译文双语对照的内容
0 0

我尝试用纯 html/css做标签,它在所有主流浏览器中都能正常工作。 除 IE 外,7和 8.

如果我不将 display: table 添加到,则在每个浏览器中的新行上都是 NOT 。 但是,IE 不会在新行中对它进行 display,即使我添加了。 我该怎么做? 是否有更好的方法来制作纯 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>

时间: 原作者:

0 0

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

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

原作者:
0 0

这个 ( jsfiddle ) 为你工作?

所做的更改:

  1. 从 ul.tabs 中删除了 display: table;
  2. 从 ul.tabs li删除 float:left
  3. 添加 display:inline-block 到 ul.tabs li
原作者:
0 0

我总是"浮点数"的li 元素:


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

原作者:
...