html - 如何完美对齐 Logo 、导航栏和 Logo

Question

经过多次研究后，我没有弄清楚如何将我的 Web 应用程序的 Logo 与导航项对齐。我创建了 Logo 图像，但无法以正确的方式对齐它! 希望你们中的一些人能帮助我。

这是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%

希望这对你有帮助...