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に追加し、表示：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のスタイルを「position：relative」に設定します。必要に応じて、スタイルを「text-align：center」に指定します。

各リンクをスパン要素に置き換えます。各スパンのonclickを指定します="document.location=行きたいURL"。これらの各スパンの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 に答える