Question

我正在尝试将div中的ul项对齐，这也恰好包含徽标。徽标很好地对齐到66％宽的div的左边，但我似乎无法将ul粉碎到右边。它在社交图标之前被卡住了，如下面的屏幕截图所示，而它应该在它们下面。

HTML

 <div class="nav-header">
        <div class="nav-header-container">

            <!-- LOGO -->
                <a class="logotina" href="#0">
                    <img src="kormosilogo.png" alt="kormosi"
                    class="logo-image">
                </a>

            <!-- MAVIGATION BUTTONS --> 
                <ul class="navigation-buttons-list">
                    <li><a href="#0">portfolio</a></li>
                    <li><a href="#0">kontakt</a></li>               
                </ul>

        </div>
    </div>

CSS

.nav-header {
    height: 80px;
    background-color: #4D4D4D;
}

.nav-header-container {
    width: 66%;
    margin: 0 auto;
    height: 80px;
}


.logo-image {
    height: 3em;
    padding: 15px;
    opacity: 0.9;
    float: left;

}

.logo-image:hover {
    opacity: 1.0;
}

.navigation-buttons-list {
    font-family: 'Roboto Black', sans-serif;
    display: block;
    float: right;
    font-weight: 600;
    font-size: 35px;
    padding: 15px;
}

.navigation-buttons-list li{
    display: inline-block;
    float: left;
    text-transform: uppercase;
}

.navigation-buttons-list a{
    text-decoration: none;
    color: #D2D2D2;
    padding: 18px
}

所有提示都将受到高度赞赏。

将列表对齐div的右侧

0 个答案: