logo标签列表

如何使用CSS使我的选项卡正确对齐？

htmlcss
3
这对于某些人来说应该很容易。我正在使用CSS创建选项卡（请注意，我不需要建议如何使它们看起来更好，这是我的客户想要的）。如下图所示，我的选项卡和“选项卡栏”没有对齐。我不知道为什么。
HTML代码如下：
<html>
    <head>
        <link rel="stylesheet" href="prototype.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <div id="content">
                <div id="tabs">
                    <span id="tab0" class="tab">
                        No Circuit
                    </span>
                    <span id="tab1" class="tab">
                        Digital Inputs
                    </span>
                </div>
            </div>
        </div>
    </body>
<html>

CSS代码如下：
#container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    position: float;
    width: 900px;
}

#content {
    border: 1px solid black;
    margin-top: 15px;
    padding: 15px;
    position: relative;
    width: 868px;
}

#tabs {
    border-top: 1px solid black;
    width: 100%;
}

.tab {
    border: 1px solid black;
    margin-left: 5px;
    margin-top: 2px;
    padding: 3px;
}

我感激任何帮助。

它应该长什么样子？我猜测并写下了一个答案，但这只是猜测。 - thirtydot
我只想让选项卡和选项卡栏对齐，没有重叠或间隙。 - Nik
（我删除了那个评论，因为我意识到您会查看我的答案。） - thirtydot
5个回答
4

嗯...不确定你是否在询问这个，但是尝试在.tab类上设置padding:0。

那解决了问题；然而，我最终会得到更挤的标签页。 - Nik
请查看我的列表解决方案，它完全符合您的要求。 - jimplode
我选择跟随 @thirtydot，因为这不是一个列表解决方案。所有这些最终都将被动态构建，而且我不需要可访问性，所以使用列表会变得太复杂了。 - Nik
@Nik：也许尝试将line-height: __em; 应用于您的tab类，当然要用数字代替下划线，这样你会更容易发现哪些数字适合。 - CodeVirtuoso
@自由职业者，我正在使用@thirtydot的解决方案，因为它可以简单地保留填充。 - Nik
4
尝试一下： http://jsfiddle.net/dYz9k/1/ 
.tab {
    border: 1px solid black;
    border-top: 0;
    margin-left: 5px;
    padding: 3px;
    display: inline-block
}

我设置了display: inline-block，并删除了margin-top和border-top。 display: inline-block可以让填充(padding)按照您的期望工作。
2

你是否考虑过使用列表，这样更有助于辅助功能。

这里有一个例子 http://jsfiddle.net/hdhkn/

HTML

<html>
    <head>

    </head>
    <body>
        <div id="container">
            <div id="content">
                <ul id="tabs">
                    <li id="tab0" class="tab">
                        No Circuit
                    </li>
                    <li id="tab1" class="tab">
                        Digital Inputs
                    </li>
                </ul>
            </div>
        </div>
    </body>
<html>

CSS

#container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    position: float;
    width: 900px;
}

#content {
    border: 1px solid black;
    margin-top: 15px;
    padding: 15px;
    position: relative;
    width: 868px;
}

#tabs {
    border-top: 1px solid black;
    width: 100%;
    list-style:none;
    height:40px;
}

.tab {
    border: 1px solid black;
    border-top:none;
    margin-left: 5px;
    padding: 3px;
    float:left;
    display:block;
}
是的，在这里使用 ul/li 是更好的选择。你应该正确地清除浮动，而不是设置 height: 40px。请用 overflow: hidden 替换 height: 40px。 - thirtydot
是的，我本来想这么做的，但是不想改变所有的标记。 - jimplode
1

您想要实现的是this吗？还是您希望您的选项卡（.tab）位于#tabs的顶部？

enter image description here

我已经将overflow: hidden添加到#tabs，并将margin-left更改为margin-right。

因为我没有指定一个，并且我正在使用Chrome :). - Kevin
1
因为溢出被隐藏了，它确实存在，只是被隐藏了！ - jimplode
1

你正在给内联元素（选项卡）添加填充，这总是会导致意想不到的结果。

我稍微整理了一下。

    <html>
        <head>
        <style type="text/css">

    #container {
        margin-left: auto;
        margin-right: auto;
        margin-top: 15px;
        width: 900px;
    }

    #content {
        border: 1px solid black;
        margin-top: 15px;
        padding: 15px;
        width: 868px;
    }

    #tabs {
        border-bottom: 1px solid black;
        width: 100%;
    }

    .tab {
        border: 1px solid black;
        border-bottom:0px solid black;
        margin-left: 5px;
        margin-top: 2px;
        padding: 3px;
        float:left;
    }
    .clear {
        display:block;
        clear:both;
    }
        </style>
        </head>
        <body>
            <div id="container">
                <div id="content">
                    <div id="tabs">
                        <span id="tab0" class="tab">
                            No Circuit
                        </span>
                        <span id="tab1" class="tab">
                            Digital Inputs
                        </span>
                        <span class="clear"></span>
                    </div>
                </div>
            </div>
        </body>
    <html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接