Question

IE11将我最近的四个导航项目包装到下一行，当所有四个一起应该放在一条线上并且组合宽度为320px时。我怎么能阻止这个？

HTML

<body>
    <div id="nav">
        <ul>
            <li><a href="/">One</a></li>
            <li><a href="/">Two</a></li>
            <li><a href="/">Three</a></li>
            <li><a href="/">Four</a></li>
        </ul>
    </div>
</body>

CSS

html, body, div, span, nav {
        margin:0;
        padding:0;
        border:0;
            width: 100%;
            box-sizing: border-box;
}
nav{
    display: block;
}
    #nav ul {
        text-align: justify;
        width: 320px;
    }
    #nav ul:after {
        margin-left: 100%;
        content: "";
    }
    #nav ul li {
        display: inline;
    }
    #nav a:link {
            border-bottom: 0;
        }
    #nav a:hover {
            color: #f00;
        }

Firefox 50中的标记和代码工作正常。我已阅读this question但不清楚答案如何应用于我的问题。

Answer 1

https://jsfiddle.net/rrjh4g2L/

如果为#nav ul设置固定宽度，并且您知道菜单中只有4个项目，则只需为width: 25%;元素设置li并使用float: left;

ul { width: 320px; overflow: hidden; } /* or use clearfix hack if you want */
li { width: 25%; float: left; }

它应该在所有浏览器中正确呈现。

如何阻止IE11将最右边的导航项包装到另一行？

1 个答案: