当前位置： 文江博客话题详情

中心导航按钮

发布于 2024-10-27 03:56:26 字数 4503 浏览 1 评论 0原文

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

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

I want to center my nav bar buttons, but for some reason, they're too far to the right. Why is this??

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>

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

乙白 2024-11-03 03:56:26

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

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

http://jsfiddle.net/CsJ8J/

You have a right margin on your links. Reduce it by half and add a left margin:

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

http://jsfiddle.net/CsJ8J/

回复 原文
老娘不死你永远是小三 2024-11-03 03:56:26

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

最后，这可能对您有用：

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

I have to mention that having multiple ids with the same name does not validate. You should remove the id="button" reference.

Last, this might work for you:

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

回复 原文
人生戏 2024-11-03 03:56:26
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>

只需在上面添加这个，它就会将它们居中

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

just add this above and it will center them

回复 原文
~没有更多了~

关于作者

以往的大感动

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文