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

Question

我正试图浮动这两个元素，下面就是我所拥有的：

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按钮浮动到z的右侧，我试图将z向左浮动，i向右浮动，它们会水平对齐但是按钮下的ul列表不占全宽。变成这样的东西：

jsFiddle-2

这是需要解决的问题。

以下是我需要的结果的屏幕截图：

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

Answer 1

尝试将ul设置为内联块，然后浮动它们。您也可以使用绝对位置来保持图标的位置。

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;  
            }
        }

Answer 2

为简化agconti的回答，您只需添加：

ul { display: inline-block; float:left; }

由于所有ul元素会相互碰撞，因此如果您添加了另一个ul，它会位于z的右侧，具体取决于您在其中添加的顺序HTML。

如果您希望横向展开ul和li，则需要执行以下操作：

ul, li { display: inline-block; float:left; }

并从你的html中删除这些ul，如下所示：

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

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

你将把所有按钮直线放置