Question

我正在尝试为社区网站制作navebar，但我无法让导航栏看起来正确并且功能正常。我似乎无法将品牌和按钮置于中心位置，我无法使按钮的形状正常工作。我仍然是一个非常新的引导程序，并不知道该怎么做。

标题徽标和图像都在这里：http://imgur.com/a/FXLOz

这就是我到目前为止的HTML

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-targer="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="assets/Header_Logo.png"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="homeButton"><a href="#"></a></li>
                <li class="articleButton"><a href="#"></a></li>
                <li class="builderButton"><a href="#"></a></li>
                <li class="guideButton"><a href="#"></a></li>
                <li class="aboutButton"><a href="#"></a></li>
            </ul>
        </div>
    </div>
</nav>

和CSS

body{
    background-image: url("https://i.imgur.com/8M7YsDs.jpg");
    background-position: center;
}

.navbar{
    height: 140px;
    width: 100%;
    background-image: url("../assets/Header/Header.png");
    background-size: cover;
    background-color: Transparent;
    background-position: center;
    border: 0px;
    text-align: center;
}


.navbar-nav{
    width:100%;
    text-align:center;
}

.homeButton{
    background-image: url("../assets/Header/Home_Button.png");
    height: 32px;
    width: 150px;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

.articleButton{
    background-image: url("../assets/Header/Articles_Button.png");
    height: 32px;
    width: 150px;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

.builderButton{
    background-image: url("../assets/Header/Builder_Button.png");
    height: 32px;
    width: 150px;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

.guideButton{
    background-image: url("../assets/Header/Guides_Button.png");
    height: 32px;
    width: 150px;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

.aboutButton{
    background-image: url("../assets/Header/About_Button.png");
    height: 32px;
    width: 150px;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

非常感谢任何帮助。非常感谢你。

编辑：看起来虽然问题没有解决但我可能取得了一些进展

尝试使用自定义按钮形状和居中按钮

0 个答案: