Question

我想将导航栏按钮放在中心位置，但出于某种原因，它们距离右侧太远了。这是为什么？

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;
}

Answer 1

您的链接上有正确的边距。将它减少一半并添加左边距：

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

http://jsfiddle.net/CsJ8J/

Answer 2

我必须提到具有相同名称的多个ID不会验证。你应该删除id =“button”引用。

最后，这可能适合您：

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

Answer 3

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>

只需添加以上内容即可将其置于中心位置

中心导航按钮

3 个答案: