0

私はメモ帳で作成しているウェブサイトを持っていますが、CSSメニューを並べることができないようです

私のJavaScriptスライドショーで正確に儀式を行います

パディングをいじってメニューを長くすることはできますが、それでも正しく整列しません

ここにウェブページの画像があります

http://img27.imageshack.us/img27/2/websitequestion1.jpg

そしてここにコードがあります、 

  <head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="galleria/galleria-1.2.8.js"></script>
    <style>
        #galleria{ width: 1020px; height: 386px;margin:0px auto;}
           body
     {
      background-image:url('bg.jpg');
      background-repeat:no-repeat;
      } 
      body {

            text-align: center;
        }
     /* Menu Start Here */

       #menu li {
            display: inline;
            list-style: none;
            padding: 0;
        }

        #menu li a {

            border: 1px solid white;
            padding: 15px 40px 15px 40px;
            text-decoration: none;
            color:black;
            margin-left: -5px;
            /* This is the background used for the animation */
            background-image: url('image2.jpg');
            /* Align the image position to the left of the a */
            background-position: left;
            -webkit-transition: all 0.8s ease-in-out;
            /* Animation with transition in Firefox (No supported Yet) */
            -moz-transition: all 0.8s ease-in-out;
            /* Animation with transition in Opera (No supported Yet)*/
            -o-transition: all 0.8s ease-in-out;
        }

        #menu li a:hover {
            color: white;
            /* Align the image position of the background to the right*/
            background-position:right;
        }

    </style>
    </head>
     <body>

         <div id="wrap">




        <h1> </h1>
        <ul id="menu">
            <li> <a href="#">Home</a> </li>
            <li> <a href="#">Products</a> </li>
            <li> <a href="#">Services</a> </li>
            <li> <a href="#">About</a> </li>
            <li> <a href="#">Contact</a> </li>
        </ul>


    </div>
    <div id="galleria">
        <img src="pic1.jpg">
        <img src="pic2.jpg">
        <img src="pic3.jpg">
        <img src="pic4.jpg">


    </div>
    <script>
        Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
        Galleria.run("#galleria"); 

    </script>

     </body>
        </html>
4

3 に答える 3

0

デフォルトのユーザーエージェントスタイルシートが原因で、順序付けされていないリストもシフトされている可能性があります。

#menu { margin-left: 0; padding-left: 0; }

それを助けるかもしれませんが、多くのブラウザはデフォルトでリスト要素に左マージンを追加します

于 2013-01-08T21:15:42.007 に答える
0

まず、#galleria と #wrap div の幅とマージンを同じにしたいので、以下を追加します。

#wrap {
    margin: 0 auto;
    width: 1020px;
}

次に、メニュー項目を適切なサイズにするために、display:inline; を捨てる必要があります。リストアイテムの場合（インラインアイテムに幅を設定できないため。次のようなものが必要になります：

#menu li {
    float: left;
    width: 20%;
}

#menu li a {
    display: block;
}

同様に簡単に display:inline-block; を使用できます。サポートする必要があるブラウザによって異なります。いくつかの方法がありますが、これで正しい方向に進むはずです。また、li をフローティングしている場合は、overflow:hidden; を追加する必要があります。または float:left; または、フロートが含まれるように、ul で明確な修正方法を使用します。

于 2013-01-08T21:19:57.423 に答える
0

次のようなものを追加します。

margin: 0 auto;
width: 380px;

中心にしたい欲求のdivに。あなたの場合、ガレリアの周りにDIVを追加して、中央に配置します。

于 2013-01-08T21:09:38.277 に答える