html - 使用下拉列表左右浮动导航按钮

Question

我试图让这两个元素 float ，下面是我得到的:

html

<div id="navBar">
<div class="navBarStyles">
    <ul class="mainNavBar">
        <li><div class="menu-icon iconStyles">z</div>
            <ul>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
        </li>
    </ul>
    <ul class="navBarInfo">
        <li><div class="i-icon iconStyles">u</div>
            <ul>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
        </li>
    </ul>

    <div style="clear: both"> </div>
</div>

CSS

@media only screen
        and (max-width : 500px) {
            #navBar .mainNavBar li ul{
                position: relative;
                display: block;
                background-color: #FFFFFF;
                text-align: center;
                height: auto;
                margin: 0;
            }
            #navBar .menu-icon{
                padding-left: 18px;
                text-align: left;
            }
            #navBar .mainNavBar li ul li{
                display: inline-block;
            }
            #navBar .mainNavBar li ul a{
                color: #666666;
                display: block;
                text-align: center;
            }
            #navBar .mainNavBar li ul{
                display: none;  
            }

            #navBar .navBarInfo li ul{
                background-color: #FFFFFF;
                text-align: center;
                height: auto;
                margin: 0;
            }
            #navBar .i-icon{
                width: 20px;
                padding-left: 18px;
            }
            #navBar .navBarInfo li ul li{
                display: inline-block;
            }
            #navBar .navBarInfo li ul a{
                color: #666666;
                display: block;
                text-align: center;
            }
            #navBar .navBarInfo li ul{
                display: none;  
            }
        }

jsFiddle

我需要将 i 按钮 float 到 z 的右侧，我尝试将 z float 到左侧，而 i 向右，它们确实水平排列，但按钮下方的 ul 列表不占用全宽。变成这样:

jsFiddle-2

这就是需要解决的问题。

下面是我需要的结果的屏幕截图:

所以当我点击 z 按钮时，u 不应该离开它的位置。这可以通过 position: absolute; 来完成，但是如果使用这种方法调整窗口大小，按钮将不会移动。

Answer 1

尝试将 ul 设置为内联 block ，然后将它们 float 。您也可以使用绝对定位来使图标保持原位。

Fiddle

CSS:

 ul { display: inline-block;}
ul li {display: inline-block;}
.left {float:left;}
.right {float:right;}
.menu-icon {
position: absolute;
top: 0;
margin: -13px;
z-index: 999;
}
#navBar{
    font-family: "opensans-semibold";
    width: 100%;
    position: relative;
    background-color: #0088FF; /*0088FF*/
    color: #FFFFFF; 
    margin-top:50px;
}

#navBar li{
    line-height: 48px;
}

.navBarStyles li a{
    display: inline-block;
    color: #FFFFFF;
    font-size: .8em;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: top;
    letter-spacing: 0;
}
@media only screen
        and (max-width : 500px) {
           #navBar .mainNavBar{
               float: left;
           } 
        
            #navBar .mainNavBar li ul{
                position: relative;
                display: block;
                background-color: #FFFFFF;
                text-align: center;
                height: auto;
                margin: 0;
            }
            #navBar .menu-icon{
                padding-left: 18px;
                text-align: left;
            }
            #navBar .mainNavBar li ul li{
                display: inline-block;
            }
            #navBar .mainNavBar li ul a{
                color: #666666;
                display: block;
                text-align: center;
            }
            #navBar .mainNavBar li ul{
                display: none;  
            }
                        
            #navBar .navBarInfo{
                float: right;
            }
            #navBar .navBarInfo li ul{
                background-color: #FFFFFF;
                text-align: center;
                height: auto;
                margin: 0;
            }
            #navBar .i-icon{
                width: 20px;
                padding-left: 18px;
            }
            #navBar .navBarInfo li ul li{
                display: inline-block;
            }
            #navBar .navBarInfo li ul a{
                color: #666666;
                display: block;
                text-align: center;
            }
            #navBar .navBarInfo li ul{
                display: none;  
            }
        }