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

首先，您希望#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; 或浮动：左；或在 ul 上使用明确的修复方法，以便包含浮动。

于 2013-01-08T21:19:57.423 回答
0

添加如下内容：

margin: 0 auto;
width: 380px;

到你想要居中的愿望 div。在你的情况下，我会在 galeria 周围添加一个 DIV 以使其居中。

于 2013-01-08T21:09:38.277 回答
0

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

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

可能会有所帮助，许多浏览器默认为列表元素添加左边距

于 2013-01-08T21:15:42.007 回答