Question

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

以下是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

你们B'coz给了一些css：float:left, margin-left:1rem等等。等等。

做点什么

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

希望这有帮助...

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

1 个答案: