Изменить с вертикальной на горизонтальную

Question

Изменить с вертикальной на горизонтальную

0

Я совершенно новый для веб-дизайна, так что несите меня.

У меня есть простое липкое меню, которое прилипает к верхней части страницы, когда пользователь прокручивается вниз. Его центрированная вертикаль в минуту, и я пытаюсь попасть в горизонтальное положение с большой удачей. Прошу прощения с шириной, но все равно ничего хорошего.

Может кто-нибудь помочь

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

user3084397 17 янв. 2014, в 18:58

Источник

0

Можете ли вы предоставить рабочую демонстрацию? (см. jsfiddle.net )
cimmanon 17 янв. 2014, в 17:28
0

Не знаю, что случилось с битом html, и теперь я не могу его отредактировать, но он находится в <div class = "menu">, и каждая строка выглядит следующим образом: <li> <center> <a href="#"> Обо мне </ a > </ центр> </ li>
user3084397 17 янв. 2014, в 17:30

Теги:

jquery

html

css

4 ответа

0

Чтобы text-align: center встроенное СОДЕРЖАНИЕ <div> или любого другого контейнера блока, используйте text-align: center

Чтобы центрировать блок КОНТЕЙНЕР по отношению к его родительскому блоку, используйте 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>

alonso.torres 17 янв. 2014, в 15:48

0

Вы можете просто добавить свойство display в код css: LIVE DEMO

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

Siamak A.Motlagh 17 янв. 2014, в 15:45

0

используя li{ display:inline-block; } li{ display:inline-block; } и некоторые другие свойства в меню вы можете получить меню с центром в центре и той же шириной li, как это:

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

kamus 17 янв. 2014, в 15:39

Ещё вопросы

Можете ли вы предоставить рабочую демонстрацию? (см. jsfiddle.net )
Не знаю, что случилось с битом html, и теперь я не могу его отредактировать, но он находится в <div class = "menu">, и каждая строка выглядит следующим образом: <li> <center> <a href="#"> Обо мне </ a > </ центр> </ li>

Craighead · Accepted Answer · 2014-01-17T15-43-00.000Z

Если вы добавите li{ display:inline-block; } li{ display:inline-block; } ваше меню должно быть горизонтальным.

JSFiddle