gpt4 book ai didi

css - float :left hover effect. 我希望它居中但是因为 float:left 它保持在左边

转载 作者:行者123 更新时间:2023-11-28 13:55:34 24 4
gpt4 key购买 nike

如何让我的链接保持居中。我希望它位于中心的容器上方。它一直向左走。如果我改变 float 它停止跳跃效果。我试着加入 margin ,但那没有任何作用。请帮助我想要跳跃悬停效果,但我不希望它向右或向左而是在中心。除了我下面的代码之外,有谁知道另一种让我的链接在悬停时跳转的方法。

         A.main:link, A.main:active, A.main:visited{
font-family: arial narrow;
color: #404040;
font-size: 20px;
text-align: center;
letter-spacing: 5px;
text-transform: lowercase;
font-weight: normal;
border:double;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}


A.main:hover {
margin-top: 2px;
}


#container {
margin: 0px auto;
padding-left:15px;
width: 800px;
height: auto;
background: #000;
border-style:double;
box-shadow: 15px 15px 5px #333;
-moz-box-shadow: 10px 10px 5px #333;
-webkit-box-shadow: 10px 10px 5px #333;}

</head>
<body>

<div id="header">
</div>
<center>
<a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
<a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
<a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
<a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
<a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
<a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
</center>

<div id="container">

</div>

最佳答案

尝试操纵填充而不是边距。

      A.main:link, A.main:active, A.main:visited{
...
margin: 0 15px 15px;
paddding-top:15px;
...
}
A.main:hover {
padding-top: 2px;
}

如果还是不行,你可以重写代码如下:

放弃“中心”元素。将其替换为 div。将此 div 的样式设置为“position:relative”。如果需要,将样式指定为“text-align:center”。

用 span 元素替换每个链接。为每个 span 指定 onclick ="document.location=你想去的 url"。在每个跨度的 CSS 中,使用绝对定位。然后您可以将它们放置在任何您喜欢的位置(在样式中使用左、右、上和/或下)。

关于css - float :left hover effect. 我希望它居中但是因为 float:left 它保持在左边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10858540/

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