Question

我使用CSS和HTML5创建了一个“Sticky Navbar”，我在导航栏上放置了4个链接，但是我无法让它们自己空间同样现在在你说这是一个重复的所有，但首先没有一个解决方案适合我，其次，我在导航栏中间有一个标志...一些帮助请！继承我的网站：catsonfire.tk < / p>

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

主页
关于

Answer 1

您的网站显示了两个链接，但有些想法：

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

使li元素成为其父ul宽度的1/4，然后将每个a元素置于其中。根据需要添加样式。

Navbar中的等间距

1 个答案: