如何完美对齐徽标和导航栏和徽标

Question

经过大量研究，我没有弄清楚如何将我的 Web 应用程序的徽标与导航项对齐。我创建了一个徽标图像，但我无法以正确的方式对齐它！ 希望你们中的一些人可以帮助我。

这里是Haml代码

  %header
     .header_inner
     = link_to image_tag('loo.png'), root_path, id: "logo"
     %nav
        - if user_signed_in?
           = link_to "New Note", new_note_path
           = link_to "Sign Out", destroy_user_session_path, method: :delete 
       - else
           = link_to "Log In", new_user_session_path

这里是 Sass 代码

header {
background: $dark_gray;
position: fixed;
top: 0;
width: 100%;
padding: 1.75rem 0;
border-bottom: 7px solid $green;
.header_inner {
    width: 90%;
    margin: 0 auto;
    #logo {
        float: left;
        padding: 1px 0;
    }
    nav {
        display: inline-block;
        width: 10px;
        float: left;
        a {
            text-decoration: none;
            color: white;
            font-size: 1.1rem;
            line-height: 1.5;
            margin-left: 1rem;
            &:hover {
                color: $green;
            }
        }
    }
}

以及导航栏样式的结果 Navbar Styling Result - Application Image

Answer 1

因为你们中的一些人提供了一些 CSS，例如：float:left, margin-left:1rem etc..etc。

做点什么

float:none
margin:0 auto;
display:inline-block;
width:100%

希望对您有所帮助...