CSS HTML：使用水平标签创建页面答案

【问题标题】：CSS HTML: Creating A Page With Horizontal TabsCSS HTML：使用水平标签创建页面
【发布时间】：2012-06-29 19:21:03
【问题描述】：

我正在尝试编写一个在顶部显示水平选项卡的网页。我从几个不同的示例中复制了 CSS 和 HTML，但我总是得到一个垂直的无序列选项列表。我没有任何其他关于无序列表的 CSS 会与我正在试验的内容发生冲突。这是 CSS：

#ts_tabmenu {
    font-size: .75em;
    padding: 20px 0px 0px 20px;
}
#ts_tabmenu ul
{
    line-height: 1em;
    margin: 0px;
    list-style-type: none;
    float: left;
    padding: 0px 0px 0px 5px;
}
#ts_tabmenu ul li
{
    float: left;
}
#ts_tabmenu ul li a
{
    text-decoration: none;
    display: block;
    float: left;
    padding: 0px 0px 0px 10px;
    background: url(tabs.gif) no-repeat left top;
    margin-left: -5px;
    z-index: 0;
    position: relative;
    color: #666666;
}
#ts_tabmenu ul li a strong
{
    font-weight: normal; /* remove the bold effect */
    display: block;
    background: url(tabs.gif) no-repeat right top;
    padding: 6px 10px 7px 5px;
    cursor: pointer;
}
#ts_tabmenu ul li a:hover
{
    position: relative;
    z-index: 5;
    background: url(tabs.gif) no-repeat left bottom;
    color: #000000;
}
#ts_tabmenu ul li a:hover strong
{
    background-image: url(tabs.gif) no-repeat;
    position: relative;
    z-index: 5;
    background-position: right bottom;
}

这是 HTML：

<div id="ts_tabmenu">
    <ul>
        <li><a href=#Dashboard><strong>Tutorialsphere</strong></a></li>
        <li><a href=#><strong>Photoshop</strong></a></li>
        <li><a href=#><strong>Illustrator</strong></a></li>
        <li><a href=#><strong>Fireworks</strong></a></li>
        <li><a href=#><strong>Flash</strong></a></li>
        <li><a href=#><strong>CSS</strong></a></li>
        <li><a href=#><strong>PHP</strong></a></li>
    </ul>
</div>

非常感谢任何建议。

问候。

【问题讨论】：

您是否尝试查看 Firebug 或等效工具发生了什么？提示：添加li { outline: 1px dotted red; }查看列表项占用的空间。

标签： html css tabs

【解决方案1】：

#ts_tabmenu ul li
{
  display:inline-block;
  float: left;
}

应该为你做这件事.. 向左浮动的问题是，如果它是一个块，它会占用它所在空间的宽度。

inline-block 将使其仅与其内容一样宽，您可能需要根据您的样式添加一些填充/边距。

【讨论】：

@Kevin，传播一些社区 cdn.sstatic.net/img/faq/faq-accept-answer.png :)
除非您使用的是 IE6 或 IE7，否则您不需要任何 float: left 规则； li 上的display: inline-block 和a 标签上的block 或inline-block 应该没问题。漂浮的东西只会增加汤。
我会说他很可能是...You guys appear to be correct. The various codes seem to work fine in IE but always render as a vertical unordered list in Firefox. – Kevin Jun 29 at 19:53

【解决方案2】：

非常适合我： http://jsfiddle.net/EPSr6/

我将display: inline-block 添加到#ts_tabmenu ul li 并且仍然可以正常工作。

【讨论】：

你们看起来是对的。各种代码在 IE 中似乎可以正常工作，但在 Firefox 中总是呈现为垂直无序列表。
@Kevin 如果对您有帮助，请您将我的回答标记为正确！

【解决方案3】：

似乎在http://jsfiddle.net/7GUVU/为我工作

顶部的标签链接。

【讨论】：

如前所述，它是一个浏览器的东西，他在旧版本的 ie 中进行测试。