Равный интервал в Навбаре

0

Я сделал "Sticky Navbar с помощью CSS и HTML5, и у меня есть 4 ссылки для размещения на навигационной панели, но я не могу их достать в пространство. Так же, как и сейчас, прежде чем вы скажете, что это дубликат и все, но в первую очередь ни один из решения работали для меня, а во-вторых, у меня есть логотип в середине навигатора... Некоторая помощь Пожалуйста! heres мой сайт: catsonfire.tk

<style>
    article {
        margin: auto;
        height:auto;
        padding-bottom:10px;
    }

    header {
        margin: auto;
        width: 100%;
        position: relative;
        top: 16px;
        height: 60px;
    }

    footer {
        background-color: wheat;
        align-content: center;
        margin: auto;
        width:100%
    }
    nav {
        position: relative;
        width: 100%;
    }
    #header_container ul {
        margin: 0;
        padding: 0px;
        list-style-type: none;
        text-align: center;
    }

    #main {
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    #header_container ul li {
        display: inline;
        width: 25%;
        margin:0;
        padding:0;
    }

        #header_container ul li a {
            text-decoration: none;
            padding: 39px;
            color: #fff;
            padding: 12px 0 13px 0;
        }

            #header_container ul li a:hover {
                color: #000;
                background-color: rgba(0, 0, 0, 0.7);
                box-shadow: 1px 1px 1px inset;
                -moz-box-shadow: 1px 1px 1px inset;
                -webkit-box-shadow: 1px 1px 1px inset;
            }
    #big {
        background: rgba(0, 0, 0, 0.5);
        top: 0px;
        left: 0px;
        right: 0px;
        margin: 0px;
        width: 100%;
        position: absolute;
        height: 105px;
    }
    #header_container {
        left: 0;
        position: fixed;
        width: 100%;
        top: 0;
        z-index:1000;
        height:150px
    }

    #header {
        line-height: 60px;
        margin: 0 auto;
    }
</style>

  • Главная
  • Около
  • 1
    Прежде чем я скажу, что это дубликат и все, позвольте мне спросить - Как мы узнаем, в чем проблема, не видя ни одного кода?
  • 0
    упс! полностью забыл! я отправляю это
Показать ещё 2 комментария
Теги:

1 ответ

0
Лучший ответ

На вашем сайте показаны две ссылки, но некоторые мысли:

#big ul{
    display:block;
}
#big li {
    display:block;
    width:25%;
    float:left;
    text-align:center;    
}
#big li a{
    display:inline-block;
}

Делает li элемент 1/4th ширины родительского ul, а затем центры каждый элемент в тех. a Добавьте свои стили, как вы хотите, чтобы они выглядели.

Поделиться
  • 0
    не работает ... это заставляет мой логотип вытолкнуть в угол ... как вы думаете, это будет работать, когда есть 4 логотипа? Кстати: мой логотип должен быть в центре
  • 0
    @aleks, вам нужно немного переосмыслить HTML-макет. Я бы поместил логотип в свой собственный <li></li> , чтобы у вас была [ссылка] [ссылка] [логотип] [ссылка] [ссылка] в верхней части <ul> , а затем установите ширину на 20% каждый , Затем вы можете добавить больше и изменить ширину, как вам нравится.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню