Question

我遇到了一个问题，我试图将我的导航项目与我的徽标在中心对齐，有人告诉我要添加行高，这样做我觉得这很有效但现在背景颜色我周围有一个我的导航按钮已拉长。下图显示了我的问题：

这是我添加行高之前导航的样子：

我真的想得到背景，看看它在第二张图片中的作用

这是我的HTML：

   <header id="header" role="banner">
            <div class="header-inner">
                <nav class="navbar">
                    <div class="container text-xs-center">
                        <div class="navbar-nav">
                            <a href='{{ url("/") }}' class="nav-item-link nav-item nav-link">Home</a>
                            <a href="#" class="nav-item-link nav-item nav-link">Our Team</a>
                            <a href="#" class="nav-item-link nav-item nav-link">Media</a>
                            <a href='{{ url("/") }}' class="nav-item nav-link"><img src="./images/zipzap.jpg" class="img-fluid" alt=""></a>
                            <a href="#" class="nav-item-link nav-item nav-link">About Us</a>
                            <a href='{{ url("/contact") }}' class="nav-item-link nav-item nav-link">Contact Us</a>
                            <a href='{{ url("/donate") }}' class="nav-item-link nav-item nav-link" id="donate">Support Us</a>
                        </div>
                    </div>
                </nav>
            </div>
        </header>

这是我的css：

a.nav-item{
    color:#000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:bold;
    padding:20px;
    line-height: 8em;
}

a.nav-item:hover{
    color:#000;
}


.navbar-nav{
    display:inline-block;
}

#donate{
    background-color: #7ED321;
    border-radius: 8px;
}

任何帮助将不胜感激

Answer 1

问题不在于行高，而是在a.nav项中填充。

    a.nav-item{
        color:#000;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight:bold;
        padding:10px 20px 10px 20px;
        line-height: 8em;
    }

我更改了填充，它看起来像你想要的东西。

查看小提琴：https://jsfiddle.net/amritanshujoshi/o0j2L6pn/

尝试将导航项目与徽标对齐时，背景图像会拉伸

1 个答案: