Fatal编程技术网
  • html/
  • Html 如何使用CSS使选项卡正确对齐？

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

html css

Html 如何使用CSS使选项卡正确对齐？,html,css,Html,Css,对某人来说，这应该是一个简单的问题。我正在用CSS创建标签（请，我不需要关于如何使它们看起来更好的建议，这是我的客户想要的）。如下图所示，我的选项卡和“选项卡栏”没有对齐。我不知道为什么 HTML： <html> <head> <link rel="stylesheet" href="prototype.css" type="text/css" /> </head> <body>

对某人来说，这应该是一个简单的问题。我正在用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>
非常感谢您的帮助。

Hm..100%不确定这是否是您所要求的，但请尝试在选项卡类上设置padding:0。

您是否考虑过使用列表，以便更好地访问

这里的例子

HTML

你想完成什么？还是希望选项卡（
.tab
）位于
#选项卡的顶部




我已将
溢出：隐藏
添加到
#tabs
中，并将
左边距
更改为
右边距
您在内联元素（选项卡）上添加了填充，这总是会导致意外结果

帮你清理一下


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




#容器{
左边距：自动；
右边距：自动；
边缘顶部：15px；
宽度：900px；
}
#内容{
边框：1px纯黑；
边缘顶部：15px；
填充：15px；
宽度：868px；
}
#标签{
边框底部：1px纯黑；
宽度：100%；
}
.标签{
边框：1px纯黑；
边框底部：0px纯黑；
左边距：5px；
边缘顶部：2倍；
填充：3倍；
浮动：左；
}
.清楚{
显示：块；
明确：两者皆有；
}
无回路
数字输入

试试：

我设置了
显示：内联块
，并删除了
页边距顶部
和
边框顶部


display:inline block
允许填充按预期工作。
它应该是什么样子？无论如何，我都会猜测并写一个答案，但这只是一个猜测。我只希望选项卡和选项卡栏对齐，没有重叠或间隙。（我删除了该评论，因为我意识到你无论如何都会看到我的答案）。这解决了问题；但是，最后我的标签会变得更加狭窄。请查看我的列表解决方案，它完全符合您的要求@thirtydot，因为它不是列表解决方案。这一切都将以动态方式完成，我不需要可访问性，所以使用列表太复杂了。@Nik：也许可以尝试通过应用行高来解决这个问题：_;em；当然，对于您的tab类，您可以不使用下划线来应用一些数字，而更容易计算出哪些数字。@自由职业者，我使用@thirtydot的解决方案，因为它只是保留了填充。因为我没有指定一个，我使用的是Chrome:）。由于溢出隐藏，它就在那里，只是隐藏了！！是的，
ul
/
li
在这里是一个更好的选择。您应该正确清除浮动，而不是设置高度：40px。将
height:40px
替换为
overflow:hidden
。是的，我会的，但不想更改所有标记

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



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



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



.tab {
    border: 1px solid black;
    border-top: 0;
    margin-left: 5px;
    padding: 3px;
    display: inline-block
}