Question

我有一个网站我在记事本中创建，我似乎无法让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>

Answer 1

添加如下内容：

margin: 0 auto;
width: 380px;

想要居中的欲望div。在你的情况下，我会在拱廊周围添加一个DIV，只是为了使它居中。

Answer 2

可能是默认的用户代理样式表导致无序列表也被移位。

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

可能有帮助，许多浏览器默认情况下将左边距添加到列表元素

Answer 3

首先，您希望您的#galleria和#wrap div具有相同的宽度和边距，因此请添加：

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

接下来，为了使您的菜单项大小合适，您需要显示：内联;对于您的列表项（因为您无法在内联项目上设置宽度。所以您需要以下内容：

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

#menu li a {
    display: block;
}

您可以轻松使用display：inline-block;取决于您需要支持的浏览器。有几种方法可以实现，但这应该让你朝着正确的方向前进。此外，如果你漂浮你的李，你需要添加溢出：隐藏;或漂浮：左;或者在ul上使用一个明确的修复方法，以便包含浮动。

如何将菜单与幻灯片放映对齐

3 个答案: