我遇到的问题与导航子菜单有关。当我在列表项中有一个子菜单时,我可以将它对齐到列表项文本的右侧或列表项文本的左侧。这在 chrome 中非常有效。
//pseudo code, see codepen link for working example
.wrapper{
display:flex;
justify-content:flex-end
}
ul
li some text
.wrapper
ul
li sub 1
li sub 2
在 chrome 中,我的包装器正确对齐到父列表项的右边缘。但是,在 Internet Explorer 11 中,父列表项似乎根据列表项中文本的组合宽度和 .wrapper 本身的宽度来调整 .wrapper div。
请在 chrome 中查看此 codepen,然后在 IE 中查看该问题的更好解释:https://codepen.io/vtsells/pen/qXVjNE
也许我尝试这样做的方式是错误的,但如果有人有任何想法,我将不胜感激
最佳答案
如前所述,基于 Flexbox 的规范在涉及绝对定位的 flex 元素时发生了变化,浏览器之间以及它们如何处理绝对定位元素之间存在不一致(和错误)。
在这种情况下,只需将 position: relative
设置为 wrap
并将 right: 0
设置为 child
,如果它们不是 flex 元素,就会有这种感觉。
此外,如果不希望文本以其父级的宽度换行,请添加 white-space: nowrap
。
* {
padding: 0;
margin: 0;
font-size: 50px;
}
ul {
display: flex;
list-style: none;
}
.sub {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.wrap {
display: flex;
position: relative; /* added */
}
.child {
flex-direction: column;
position: absolute;
right: 0; /* added */
}
li {
border: 1px solid #333;
}
<ul class="parent">
<li class="sub">example
<div class="wrap">
<ul class="child">
<li>link 1</li>
<li>link 2</li>
</ul>
</div>
</li>
</ul>
关于html - 证明内容 : flex-end works correctly in chrome but aligns based off the the wrong width in IE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45701734/