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/