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

1 回答 1

6

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

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

于 2013-11-11T15:45:14.373 回答