问人力资源线上的CSS按钮？
EN

Stack Overflow用户

提问于 2013-11-11 15:40:17

回答 1查看 3.4K关注 0票数 3

大家好，今天我有一个问题，关于如何在hr线上放置一些CSS按钮。我已经上传了一个例子到我的网络服务器。再一次，按钮在行，我也考虑有多个按钮。

我只有13岁，所以解释也很好，^_^，谢谢！联机按钮：http://dibjso.tk/projects/Stack/bonhr/bonhr.html

代码：

   <head>
        <style type="text/css">
            body{
                background-color: #E0E0E0;
                text-align: center;
            }
            h1{
                font-size: 75px;
            }
            hr{
                width: 85%;
            }
            .buttons{
                width: 65px;
                height: 35px;
                background-color: #B5B5B5;
                padding: 5px;
                border: 1px solid #000000;
                text-align: center;
            }
            .buttons:hover{
                background-color: #C4C4C4;
                border: 1.5px solid #171717;
            }
        </style>
    </head>

    <body>
        <h1>TITLE</h1>
         <hr size="0">
         <span class="buttons">Example Button</span>
    </body>

    </html>

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-11-11 15:45:14

如果我理解得对，这应该能起作用的关键是给按钮一个position:relative，将它们更改为inline-block，然后提供一个负的顶部偏移量。

这是指定按钮元素应该计算其相对于前面的DOM元素/其父元素的位置，通过将top设置为负值，它基本上表示相对于前面的元素‘完成’的位置，将按钮向上移动一点，重叠它。设置display:inline-block允许我们将其应用于元素，因为它只适用于块元素，同时保留了内联元素特性所需的行为。

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19910193

复制

相似问题

问人力资源线上的CSS按钮？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问人力资源线上的CSS按钮？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问人力资源线上的CSS按钮？
EN