html - 我怎样才能阻止 IE11 将最右边的导航项换行到另一行?

标签 html css

IE11 将我的四个导航项中最右边的导航项换行到下一行,而所有四个导航项都应该放在一行上并且总宽度为 320 像素。我怎样才能阻止它?

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但不清楚如何将答案应用于我的问题。

最佳答案

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

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

关于html - 我怎样才能阻止 IE11 将最右边的导航项换行到另一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41623532/

相关文章:

html - 具有与文本内联的按钮的 CSS

css - 如何在css sprite hover上制作过渡效果

html - CSS 居中对齐

html - 最大高度和溢出不在 ie9 上滚动

css - 导航菜单无法正常工作

html - 获得第一个 child

html - 如何将标题放在此标题栏中?

html - 删除 URL 中的下划线 [text-decoration : none; doesn't work]

jquery - 如何在页面加载时运行 Logo

html - 在 IE 中使用媒体查询时 CSS 动画不起作用