css代码如何将导航放在中间

时间：2015-07-21 06:24:47

标签： javascript jquery html css

我正在开发一个网页，其中屏幕也适合移动设备。

style.css 

/* GENERAL STUFF */

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    font-family: 'Cabin', sans-serif;
}

/*.clear {
    clear: both;
}*/

.clear:after {
    display: block;
    clear: both;
    visibility: hidden;
    content: "";
    height: 0;
}

/* HEADER BLOCK */

.header-background {

    padding-top: 50px;
}

 .header-background > div:first-child {
    width: 100%;
    background: #232323;
} 

.header {
    background: #232323;
    color: #B2B2B2;
    width: 80%;
    margin: auto;
}

.header a {
    text-decoration: none;
    color: white;
}

.header a:active {
    color: #19A3A3;
}






#nav {
    position: relative;
    display: block;
    height: 55px;
    line-height: 55px;
    width: 100%;
    max-width: none;
    margin: 0;
    background: #333;

    z-index: 1;
    border-bottom: 1px solid #666;
    font-weight: 600;
    font-family: helvetica, arial, sans-serif;
    font-size: 14px;
}

#nav, #nav * {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.nav-item {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}


/* Desktop */

#desktop-nav .nav-item {
    display: block;
    padding: 0 20px;
    float: right;

    -webkit-transition: color 200ms linear;
    -moz-transition: color 200ms linear;
    -ms-transition: color 200ms linear;
    -o-transition: color 200ms linear;
    transition: color 200ms linear;
}

#desktop-nav .nav-item:hover, #desktop-nav .nav-item:active {
    opacity: 0.7;
}


/* Mobile */

#mobile-nav {
    position: absolute;
    top: 55px;
    right: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: visibility 0ms linear 200ms, opacity 200ms linear;
    -moz-transition: visibility 0ms linear 200ms, opacity 200ms linear;
    -ms-transition: visibility 0ms linear 200ms, opacity 200ms linear;
    -o-transition: visibility 0ms linear 200ms, opacity 200ms linear;
    transition: visibility 0ms linear 200ms, opacity 200ms linear;
}

#mobile-nav .nav-item {
    display: block;
    width: 100%;
    padding-left: 30px;
    background: #333;
    border-bottom: 1px solid #666;
    opacity: 0;

    -webkit-transition: background 200ms linear, color 200ms linear;
    -moz-transition: background 200ms linear, color 200ms linear;
    -ms-transition: background 200ms linear, color 200ms linear;
    -o-transition: background 200ms linear, color 200ms linear;
    transition: background 200ms linear, color 200ms linear;
}

#mobile-nav .nav-item:hover, #mobile-nav .nav-item:active {
    background: #666;
    color: white;
}

#mobile-nav .nav-item:last-child {
    border-bottom: none;
}


/* Toggles */

.nav-toggle {
    position: absolute;
    left: -100px;
    right: 0;
    line-height: 0px;
    border: none;
    cursor: pointer;

    height: 22px;
    width: 22px;
    margin: 16px 22px;

    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: url('../images/menu-icon.svg');
    background-color: #333;
}

.nav-toggle:hover {
    opacity: 0.7;
}

#open-toggle:focus {
    left: -100px;
}

#open-toggle:focus ~ #close-toggle {
    left: auto;
}

#open-toggle:focus ~ #mobile-nav {
    visibility: visible;
    opacity: 1;

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

#open-toggle:focus ~ #mobile-nav .nav-item {
    opacity: 1; /* Avoid initial fade in of content, have to use opacity because using visibility breaks functionality */
}


/* Logo */

#logo {
    position: absolute;
    padding: 0 20px;
    font-size: 21px;
    font-weight: bold;
    cursor: pointer;
    color: #fff
}

#logo:hover {
    opacity: 0.7;
}




















.header-logo {
    font-family: 'Indie Flower', cursive;
    font-size: 36px;
    padding: 8px;
    float: left;
}

.header-notes {
    padding: 100px 0;
    width: 100%;
    color: white;
}

.header-notes div {
    margin: auto;
    width: 50%;
    text-align: center;
    font-size: 40px;
}

span.green {
    color: #19A3A3;
}

/* PAGE MAIN CONTENT */

.content {
    text-align: center;
    padding-top: 50px;
}

.content h2 {
    color: #19A3A3;
    padding: 25px;
}

.content p {
    padding: 25px 15%;
}

.hr-background {
    background: url(../img/hr-bg.png);
    width: 229px;
    height: 14px;
    margin: auto;
}

.photos {
    margin: auto;
    margin-top: 30px;
    margin-bottom: 40px;
    display: inline-block;
    width: 70%;
}

.photos ul li {
    float: left;
    list-style: none;
    padding: 1%;
    width: 23%;
}

.photos ul li img {
    width: 100%;
}

.photos ul li:hover h3 {
    color: #19A3A3;
}

.photos a {
    text-decoration: none;
    color: black;
}

.photos h3 {
    padding: 15px 0;
    font-size: 16px;
}

.photos p {
    font-size: 13px;
    padding: 0;
}

.slider {
    display: block;
    margin: auto;
    margin-bottom: 30px;
    width: 60px;
}

.slider ul {
    height: 8px;
}

.slider ul li {
    float: left;
    list-style: none;
    background: url(../img/slide_point_bg.png) no-repeat;
    width: 8px;
    height: 8px;
    margin-left: 5px;
    border-radius: 100%;
}

.slider ul li.active {
    background: url(../img/slide_point_active_bg.png) no-repeat;
}

.slider ul li:hover {
    box-shadow: 0 0 0.5em black;
}

/* FOOTER */

.footer {
    background: #062134;
    color: white;
    display: table;
    font-size: 14px;
}

.footer .column-title {
    margin-bottom: 30px;
    font-weight: bold;
}

.footer > div {
    display: table-row;
}

.footer > div > div {
    display: table-cell;
    width: 23%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.footer > div > div:first-child {
    padding-left: 5%;
    padding-right: 1%;
}

.footer > div > div:nth-child(2) {
    padding-left: 1%;
    padding-right: 1%;
}

.footer > div > div:nth-child(3) {
    padding-left: 1%;
    padding-right: 20%;
}

.footer p {
    line-height: 200%;
}

.footer input {
    display: block;
    float: left;
    background: #062134;
    /*border: 2px solid white;*/
    border-top: 2px solid white;
    border-right: 0;
    border-bottom: 2px solid white;
    border-left: 2px solid white;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    /*padding: 10px;*/
    width: 75%;
    color: white;
    height: 36px;
    text-indent: 10px;
}

::-webkit-input-placeholder {
   color: #1F3748;
}

:-moz-placeholder { /* Firefox 18- */
   color: #1F3748;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #1F3748;
}

:-ms-input-placeholder {
   color: #1F3748;
}

.footer button {
    float: left;
    background: #062134 url(../img/arrow-input-bg.png) 10px 10px no-repeat;
    height: 40px;
    width: 40px;
    height: 40px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-left: 0;
    border-left: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 30px;
}

/*.row-2 p {
    clear: left;
}*/

.footer input:focus {
    outline: 0;
    background: #4D7EC9;
}

.footer input:hover {
    box-shadow: 0 0 0.5em white;
}

.footer button:hover {
    background-color: blue;
}

.footer button:focus {
    outline: 0;
}

.list-of-resources {
    display: table;
}

.list-of-resources > div {
    display: table-row;
}

.list-of-resources > div  > div {
    display: table-cell;
    padding: 5px 0;
}

.list-of-resources > div  > div:last-child {
    padding: 0 0 0 30px;
}

.list-of-resources a {
    text-decoration: none;
    color: white;
}

.list-of-resources a:hover {
    color: tomato;
}

@media screen and (max-width:1000px) {

    /* HEADER */

    .header-background {
/*      height: 300px;*/
        padding-top: 0;
    }

    .header-notes {
        padding: 50px 0;
    }

    .header-notes > div {
        width: 70%;
        font-size: 35px;
    }

    .header-background > div:first-child {
        top: 0;
    }

    .header {
        background: #232323;
        color: #B2B2B2;
        width: 100%;
        margin: auto;
    }

    .header-logo {
        font-family: 'Indie Flower', cursive;
        font-size: 36px;
        padding-left: 30px;
        float: left;
    }

   /*  nav {
        float: initial;
        clear: both;
    }

    nav ul {

        list-style: none;
        padding: 15px;
    }

    nav ul li {
        display: inline;
        padding: 15px;
    } */

    /* CONTENT */

    .photos {
        width: 90%;
    }

}

@media screen and (max-width:900px) {

    .footer > div > div {
        display: table-cell;
        width: 28%;
        padding-top: 50px;
    }

    .footer > div > div:first-child {
        padding-left: 5%;
        padding-right: 1%;
    }

    .footer > div > div:nth-child(2) {
        padding-left: 1%;
        padding-right: 1%;
    }

    .footer > div > div:nth-child(3) {
        padding-left: 1%;
        padding-right: 5%;
    }

}

@media screen and (max-width:700px) {

    .footer > div > div {
        display: block;
        float: left;
        width: 42%;
    }

    .footer > div > div:last-child {
        clear: both;
        padding-left: 5%;
        padding-top: 10px;
    }


    #desktop-nav {
        display: none;
    }

    #open-toggle {
        left: auto;
    }


}

@media screen and (max-width:600px) {

    .photos ul li {
        padding: 5%;
        width: 40%;
    }

    .photos ul li:nth-child(3n+3) {
        clear: left;
    }

    .photos h3 {
        padding: 15px 0;
        font-size: 18px;
    }

    .photos p {
        font-size: 16px;
        padding: 0;
    }

    .footer > div > div {
        width: 90%;
    }

    .footer > div > div:nth-child(2) {
        clear: both;
        padding-left: 5%;
        padding-top: 10px;
    }

}

@media screen and (max-width:480px) {

    .header-logo {
        font-size: 26px;
        padding: 8px;
    }

    .header-notes > div {
        width: 80%;
        font-size: 26px;
    }

  nav ul {
        list-style: none;
        padding: 5px;
    }

    nav ul li {
        display: inline;
        padding: 5px;
    } 

}

HTML 

<body>
    <div class="header-background">
        <!-- <div> -->
         <div id="nav">
        <div id="logo">Site Title</div>
        <nav id="desktop-nav">
            <a class="nav-item" href="#1">Github</a>
            <a class="nav-item" href="#2">About</a>
            <a class="nav-item" href="#3">Community</a>
            <a class="nav-item" href="#4">Docs</a>
        </nav>
        <input id="open-toggle" class="nav-toggle" type="text" readonly>
        <input id="close-toggle" class="nav-toggle" type="text" readonly>
        <nav id="mobile-nav">
            <a class="nav-item" href="#4">Docs</a>
            <a class="nav-item" href="#3">Community</a>
            <a class="nav-item" href="#2">About</a>
            <a class="nav-item" href="#1">Github</a>
        </nav>
    </div>
       <!--  </div> -->

       <!--  <div class="header-notes">
            <div><span class="green">/creative</span> one page template</div>
        </div> -->

    </div>

和js字段是： - 

(function(adiachenko) {

    window.addEventListener("load", function() {

        var stuffList = document.querySelectorAll("#stuff-list li");

        if (stuffList.length % 4 === 1) {
            var view = window.innerWidth;

            if (view > 600) {
                [].forEach.call(stuffList, function(stuffMember) {
                    // do whatever
                    stuffMember.style.width = "18%";
                });
            }

            window.onresize = function() {
                view = window.innerWidth;
                changePictureSize(view, stuffList);
            };
        }

        function changePictureSize(view, stuffList) {
            if (view > 600) {
                [].forEach.call(stuffList, function(stuffMember) {
                    // do whatever
                    stuffMember.style.width = "18%";
                });
            } else {
                [].forEach.call(stuffList, function(stuffMember) {
                    // do whatever
                    stuffMember.style.width = null;
                });
            }
        }

    }, false);

}(window.adiachenko = window.adiachenko || {}));

现在我收到的页面如下： - this page

但我希望导航如下： - this page

此导航需要调整为页面正文..

navigation.css 

#nav {
    position:relative;
    width:620px;
    margin:0 auto;
}

ul#navigation {
    margin:0px auto;
    position:relative;
    float:left;
    border-left:1px solid #c4dbe7;
    border-right:1px solid #c4dbe7;
}

ul#navigation li {
    display:inline;
    font-size:12px;
    font-weight:bold;
    margin:0;
    padding:0;
    float:left;
    position:relative;
    border-top:1px solid #c4dbe7;
    border-bottom:2px solid #c4dbe7;
}

ul#navigation li a {
    padding:10px 25px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border-right:1px solid #fff;
    border-left:1px solid #C2C2C2;
    border-top:1px solid #fff;
    background: #f5f5f5;

    -webkit-transition:color 0.2s linear, background 0.2s linear;   
    -moz-transition:color 0.2s linear, background 0.2s linear;  
    -o-transition:color 0.2s linear, background 0.2s linear;    
    transition:color 0.2s linear, background 0.2s linear;   
}

ul#navigation li a:hover {
    background:#f8f8f8;
    color:#282828;
}

ul#navigation li:hover > a {
    background:#fff;
}

/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
    visibility:visible;
    opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;    
    visibility:hidden;
    position: absolute;
    z-index: 99999;
    width:180px;
    background:#f8f8f8;
    box-shadow:1px 1px 3px #ccc;
    opacity:0;
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
    transition:opacity 0.2s linear, visibility 0.2s linear;     
}

ul#navigation ul {
    top: 43px;
    left: 1px;
}

ul#navigation ul li ul {
    top: 0;
    left: 181px;
}

ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
    background:none;
    padding:7px 15px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:150px;
}

ul#navigation li a.first {
    border-left: 0 none;
}

ul#navigation li a.last {
    border-right: 0 none;
}

但我失败了...我必须添加此字段才能到达此屏幕????

3 个答案:

答案 0 :(得分：2)

请查看以下链接。

http://jsfiddle.net/bdd9U/564/ 

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

答案 1 :(得分：0)

中心对齐任何元素的基本经验法则是指定宽度和边距自动如此

.my-class {
  width: 600px;
  margin: auto;
}

答案 2 :(得分：0)

我希望这对您的问题有所帮助。

https://jsfiddle.net/4txndpfm/ 

 $('.handle').on('click', function(){
      $('nav ul').toggleClass('showing');
    });
相关问题
最新问题