gpt4 book ai didi

html - 小时线上的 CSS 按钮?

转载 作者:搜寻专家 更新时间:2023-10-31 23:05:15 26 4
gpt4 key购买 nike

大家好,今天我有一个关于如何在 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>

最佳答案

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

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

关于html - 小时线上的 CSS 按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19910193/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com