jquery - 导航 float - 调整大小中断

Question

好的，我有一个导航，其中四个元素向左浮动，另外两个元素向右浮动。整个导航以百分比表示，以便响应。 但是，在窗口调整大小时，向右浮动的元素“ catch ”向左浮动的元素，然后在它们下面。我已经很沮丧了，因为我不知道发生了什么。

这是:JSFiddle .不完美，但您可以看到发生了什么。

        <div class="wrapper">
    <a class="logo" href="home.html" title="Back to Home Page"></a>
        <div class="navigation">
            <div class="menu-button"></div><!-- end of menu-button -->
                <ul class="flexnav" data-breakpoint="800">
                    <li><a href="#">Link1</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link2222</a></li>
                    <li><a class="service" href="#">Do Your Homework</a></li>
                    <li><a id="circle" href="#">My Homework</a></li>
                    <li><a href="#">Homework Login</a></li>
                </ul>
        </div><!-- end of navigation --> 
    </div><!-- end of wrapper -->

和 CSS:

.wrapper { max-width: 1140px; margin: 0 auto; }

.navigation {
    width: 64.91228%;
    margin: auto;
    position: relative;
    left:10.35087%;
}
.flexnav {
    margin:0;
    padding: 0;
    list-style: none;
    line-height: 1;
    display: block;
    overflow: visible;
    width: 100%;
    height: 46px;
    font-family: "Fauna One", Helvetica, sans-serif;
}

    .flexnav:after {
        content: "";
        display: table;
        clear: both; 
    }

    .flexnav>li {
        float: left;
    }

    .flexnav li {
        display: block;
        position: relative;
        margin:6px 2.7027027% 0 0;
        padding:0 2.7027027% 0 0;
        border-right:2px solid #4d4e4f; 
    }

        /* The links */
        .flexnav li a {
            /* Layout */
            position: relative;
            display: block;
            z-index: 2;
            padding:0 0 0 0;
            overflow: hidden;
            /* Typography */
            font-size: 1em;
            color: #ff000;
            text-decoration: none;
        }
        .flexnav li:nth-child(3) {
            border:none;
            margin:6px 0 0 0;
        }
        .flexnav li:nth-child(4) {
            border:none;
            margin-right:0;
            padding-right:0;
        }
        .flexnav li:nth-child(5) {
            float:right;
            border-right:none;
            margin:10px 0 0 0;
            padding:0 0 0 0;
        }
        .flexnav li:nth-child(6) {
            float:right;
            border-right:none;
            margin:10px 2.04350691% 0 0;
            padding:0 2.04350691% 0 0;
        }
        .flexnav li:nth-child(5) a {
            border-right:none;
            padding-bottom:3px;
            font-size:0.750em;
        }
        .flexnav li:nth-child(6) a {
            border-right:none;
            padding-bottom:3px;
            font-size:0.750em;
        }
        .flexnav li .service {
            max-width:141px;
            min-height:20px;
            position:relative;
            font-size:0.875em;
            margin:-3px 0 0 0;
            padding:6px 28px 0 10px;
            background-color:#000;
            border-radius:3px;
        }

我想要的是当左边部分来到右边时，一起继续向左滑动。

Answer 1

好吧，摆弄了一个小时后，我开始工作了。

JSFiddle

有几件事使这成为可能。

CSS

.wrapper {
    /*Sets a scroll bar on the div when reaches minimal width*/
    overflow-x:auto;
    /*aligns UL elements center*/
    text-align:center;
    /*Makes sure that no element wraps to next line*/
    white-space:nowrap;
}

js

//Creates a media query to make sure that no float will wrap
var navWidth = 0;
var buffer = 50;
//grabs the width of the all the ul elements
$('ul').each(function(){
    navWidth += $(this).width() + buffer;
});
//sets a media query to turn off float at the max width of the nav bar.
$('#style').html("@media (max-width:"+navWidth+"px) { .pull-right{ float: none; }}");