Question

大家好，我今天再次提出一个关于如何在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>

Answer 1

如果我理解正确，this should do the trick关键是要给你的按钮position:relative，将它们更改为inline-block，然后提供负顶部偏移量。

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

hr线上的CSS按钮？

1 个答案: