最新的浏览器(Chrome、Safari、IE)发生了一些变化,我不明白为什么现在看起来很糟糕。我说的网站是here (“写作”菜单),我无法为这个问题构建一个最小化的 fiddle (抱歉)。
我有一个标准的基于 CSS 的菜单,它由无序的嵌套列表构建而成,这些列表在鼠标悬停时显示/隐藏。对于那些还有另一个菜单的子菜单,我使用自动放置的“>”字符来表示。这是代码:
ul.menu li.arrow > a::after {
content: ">";
float: right;
padding-left: 1em;
}
所以对于那些 <li>
具有另一个子菜单的元素(即嵌套的 <ul>
)我想自动添加右对齐的“>”。这直到最近才奏效。然而,随着一些最新的浏览器更新,“>”似乎并没有扩展 <ul>
的宽度。不再而是绕到下一行。
我试图以某种方式加宽 <ul>
(目前设置为 width:auto
)但这没有帮助;设置 <li>
或 <a>
在列表项内到 white-space:nowrap
也没有帮助。但是,我注意到当我删除 float
时然后所有“>”都在那里,只是没有很好地对齐到右侧。
我该如何解决这个问题?
最佳答案
尝试使用 :before
而不是 :after
:
ul.menu li.arrow > a:before {
content: ">";
float: right;
padding-left: 1em;
}
问题是 float 元素只能影响后面的元素,而不能影响前面的元素。
但是如果你想在 >
和文本之间进行一些分离,使用
ul.menu li.arrow:before {
content: ">";
float: right;
}
ul.menu li.arrow > a {
padding-right: 1em;
}
关于html - CSS::after 选择器在我的菜单中换行并移动文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20020390/