0

我如何让我的链接保持中心。我想把它放在我的容器上方。它一直向左走。如果我改变浮动它会停止跳跃效果。我尝试设置边距，但无济于事。请帮助我想要跳跃悬停效果，但我不希望它向右或向左，而是在中心。除了我下面的代码之外，有谁知道让我的链接在悬停时跳转的另一种方法。

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

3 回答 3

0

在菜单中添加一个未排序的列表和 li 项。然后将 text-align:center 添加到 ul 并将 display:inline 或 inline-block 添加到 li。这是一个关于它的小提琴。http://jsfiddle.net/XhmGe/

于 2012-06-01T23:53:26.080 回答
0

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

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

如果这不起作用，您可以重写代码如下：

抛弃“中心”元素。将其替换为 div。将此 div 的样式设置为“位置：相对”。如果需要，将样式指定为“text-align:center”。

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

于 2012-06-01T23:56:27.000 回答
0

我已经想出了一个代码来解决所有问题。这以我的标签为中心:) 

          #centeredmenu {
             float:left;
             width:100%;
             background:#fff;
             overflow:hidden;
             position:relative;
                    }
          #centeredmenu ul {
             clear:left;
             float:left;
             list-style:none;
             margin:0;
             padding:0;
              position:relative;
             left:50%;
             text-align:center;
                 }
               #centeredmenu ul li {
                 display:block;
                 float:left;
                 list-style:none;
                 margin:0;
                 padding:0;
                 position:relative;
                 right:50%;
                         }
                #centeredmenu ul li a {
                  display:block;
                   margin:0 0 0 1px;
                  padding:3px 10px;
                  background:#ddd;
                  color:#000;
                  text-decoration:none;
                   line-height:1.3em;
                       }
                 #centeredmenu ul li a:hover {
                    background:#369;
                     color:#fff;
                         }
                #centeredmenu ul li a.active,
                #centeredmenu ul li a.active:hover {
                     color:#fff;
                      background:#000;
                      font-weight:bold;
                             }
于 2012-06-03T00:21:50.917 回答