HTML – 如何让我的标签使用CSS正确排列?

HTML – 如何让我的标签使用CSS正确排列?,第1张

概述对某人来说这应该是一件容易的事情.我正在用CSS创建标签(请,我不需要如何使它们看起来更好的建议,这是我的客户想要的).正如您在下图中看到的那样,我的标签和我的“标签栏”没有对齐.我不知道为什么. HTML: <html> <head> <link rel="stylesheet" href="prototype.css" type="text/css" /> </ 对某人来说这应该是一件容易的事情.我正在用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" >                        No Circuit                    </span>                    <span ID="tab1" >                        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;}

我感谢任何帮助.

解决方法 尝试: 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允许填充按预期工作.

总结

以上是内存溢出为你收集整理的HTML – 如何让我的标签使用CSS正确排列?全部内容,希望文章能够帮你解决HTML – 如何让我的标签使用CSS正确排列?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1047971.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存