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

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

做点什么

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

希望这对您有所帮助...

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

How to align perfectly the logo and the navbar and the logo

html

css

sass

styles

haml