Question

这对某人来说应该是一件容易的事。我正在用CSS创建标签（请，我不需要如何使它们看起来更好的建议，这是我的客户想要的）。正如您在下图中看到的那样，我的标签和我的“标签栏”没有对齐。我不知道为什么。

enter image description here

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;
}

我感谢任何帮助。

Answer 1

嗯..不确定100％如果那是你问的问题，但尝试设置填充：0。on class class

Answer 2

尝试：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允许填充按预期工作。

Answer 3

您是否考虑使用列表，更适合使用辅助功能

此处示例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;
}

Answer 4

this你想要完成什么？或者您希望标签（.tab）位于#tabs之上吗？

enter image description here

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

Answer 5

您在内联元素（选项卡）上添加填充，这总是会导致意外结果。

为你清理了一下。

    <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>

如何让我的标签使用CSS正确排列？

5 个答案: