1

我想将导航栏按钮居中，但由于某种原因，它们离右侧太远了。为什么是这样？？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="css/mainStyle.css" rel="stylesheet" type="text/css">    
    <script type="text/javascript" src="js/jquery.js"></script>

    <script language="javascript">

                function start() {
                    hideAll();
                    $('#about').show();
                }

                function hideAll() {
                    $('#home').hide();
                    $('#contact').hide();
                }

                function slideAll() {
                    $('#home').slideUp();
                    $('#contact').slideUp();
                }

                $(document).ready(function() {
                    start();
                });
        </script>
</head>
<body>

    <style type="text/css">

        body {
            background-color: #f3f3f3;
        }
        div.banner {
            width: 800px;
            height: 200px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid black;
            text-align:  center;
            background: white;
        }
        div.main { 
            width: 800px;
            height: auto;
            margin: 40px auto 50px auto;
            background-color: white;
            padding: 20px;
        }
        p {
            font-family: Helvetica;
            font-weight: 100;
            text-indent: 0px;
            margin-bottom: 40px;
        }
        div.heading {
            font-size: large;
            text-transform: uppercase;
            font-family: Helvetica;
            font-weight: bolder;
            margin-bottom: 20px;
        }

        .answer {
            font-family: Helvetica;
            font-weight: 100;
            margin-left: 60px;
        }
        p.question {
            font-family: Helvetica;
            margin: 0px 0px 0px 0px;
            text-indent: -13px;
            padding-left: 13px
        }
        #shadow {
            -webkit-box-shadow: 0px 0px 4px #000000;
            -moz-box-shadow: 0px 0px 4px #000000;
            box-shadow: 0px 0px 4px #000000; 
        }

    </style>

    <div class="banner">
        BANNER
    </div>


    <nav id="navcontainer">
        <ul id="navlist">
            <li id="button"><a onclick="hideAll(); $('#home').slideDown();" id="current">Home</a></li>
            <li id="button"><a href="#">Past Summer Camps</a></li>
            <li id="button"><a onclick="hideAll(); $('#contact').slideDown();">About Summer Camps</a></li>
            <li id="button"><a href="#">Apply</a></li>
            <li id="button"><a onclick="hideAll(); $('#contact').slideDown();">Contact</a></li>
            <li id="button"><a href="#">Photo Gallery</a></li>
        </ul>
    </nav>

    <div class="main" id="shadow">


    </div>

            <div id="about">

            </div>


        <div id="contact">
            CONTACT
        </div>
    </div>


</body>
</html>

和CSS：

#navcontainer ul
{
    list-style-type: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 40px;
}

#button { display: inline; }

li a
{
    text-decoration: none;
    color: black;
    padding: 8px;
    margin-right: 30px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;


    background: #eeeeee; /* old browsers */
    background: #eeeeee; /* old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #A0A0A0 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#A0A0A0)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#A0A0A0',GradientType=0 ); /* ie */

    -webkit-box-shadow: 0px 0px 3px #000000;
    -moz-box-shadow: 0px 0px 3px #000000;
    box-shadow: 0px 0px 3px #000000;

    text-transform: uppercase;
    font: 22px 'HomeRemedy', Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

li a:hover
{
    background: #353535;
    color: #fff;
}
4

3 回答 3

0

我不得不提一下，拥有多个具有相同名称的 ID 是无效的。您应该删除 id="button" 引用。

最后，这可能对您有用：

http://jsfiddle.net/CsJ8J/1/

于 2011-04-21T22:34:36.437 回答
0 
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>

只需在上面添加它，它就会使它们居中

于 2013-01-12T00:18:31.363 回答
0

您的链接有右边距。将其减半并添加左边距：

margin-right: 15px;
margin-left: 15px;

http://jsfiddle.net/CsJ8J/

于 2011-03-29T00:07:33.260 回答