从垂直变为水平

时间:2014-01-17 17:22:37

标签: jquery html css

我对网页设计很陌生,所以请耐心等待。

我有一个简单的粘性菜单,当用户向下滚动时会粘在页面顶部。 它在一分钟的中心垂直,我试图进入中心水平,没有太多的运气。一直在搞乱宽度,但仍然没有好处。

任何人都可以帮忙吗

JQuery的

$(document).ready(function(){
    var menu = document.querySelector('.menu');
    var origOffsetY = menu.offsetTop;

    function scroll () {
        if ($(window).scrollTop() >= origOffsetY) {
            $('.menu').addClass('sticky');
            $('.content').addClass('menu-padding');
        } else {
            $('.menu').removeClass('sticky');
            $('.content').removeClass('menu-padding');
        }
    }

    document.onscroll = scroll;
});

HTML

<div class="menu">
    <ul>
        <li><center><a href="#">About Me</a></center></li>
        <li><center><a href="#">My Work</a></center></li>
        <li><center><a href="#">Experience</a></center></li>
        <li><center><a href="#">Contact Me</a></center></li>           
    </ul>                   
</div>

CSS

* {font-family:arial; margin:0; padding:0;}
.logo {font-size:40px; font-weight:bold;color:#a00; font-style:italic;}
.intro {color:#777; font-style:italic; margin:10px 0;}
.menu { color:#fff;   height:50px; line-height:30px;letter-spacing:1px; width:100%;}
.content {margin-top:10px;}
.menu-padding {padding-top:40px;}
.content p {margin-bottom:20px;}
.sticky {position:fixed; top:0;}

4 个答案:

答案 0 :(得分:0)

如果添加li{ display:inline-block; },您的菜单应该是水平的。

JSFiddle

答案 1 :(得分:0)

您只需将display属性添加到css代码: LIVE DEMO

.menu ul li { display:inline-block; }

答案 2 :(得分:0)

要使<div>或任何其他块容器的内联CONTENT居中,请使用text-align: center

要将块CONTAINER相对于其块父项居中,请使用margin: 0 auto;

您也可以尝试将<ul>集中在一起:

.menu ul { width:140px, margin: 0 auto; } // Centering the UL in relation to menu
.menu ul li { text-align: center; } // Centering the text inside each <li>

答案 3 :(得分:0)

使用菜单中的li{ display:inline-block; }和其他一些属性,您可以获得一个文本居中且相同宽度为li的菜单,如下所示:

http://jsfiddle.net/P9533/2/