与右“左三角形"对齐在菜单元素中
[英] Align to right "left triangle" in menu element
本文介绍了与右“左三角形"对齐在菜单元素中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我构建了 HTML/CSS/JS 菜单并希望将箭头向右对齐以指出该元素是子菜单.
我的问题是在 Firefox 中三角形(▶"符号)显示在下一行而不是当前行...
Chromium 显示两种情况都很好.
BTS 中存在与我的情况类似的错误:
我尝试了两种策略，这是我的 HTML 结构:
子菜单1▶
<a href="#">项目 1</a><a href="#">项目 2</a><div class="name2">子菜单 2</div><a href="#">项目 1</a><a href="#">项目 2</a>
这是我的 CSS 显示问题:
a, .name1, .name2 {显示:块；空白:nowrap；}.name1 >.sub {浮动:对；}.name2:在{之后内容:▶"；浮动:对；}
JS Fiddle 用于游乐场.
我记得我读过代码，其中 margin-right: -16px 或类似的与背景图像或其他东西一起使用以进行此类设计，但我不记得具体是如何进行的.
可能的解决方法是什么?
更新我做了更完整的例子，HTML:
顶级菜单<div class="box"><div class="name1">很长的子菜单 1<span class="sub">▶</span></div><a href="#">Item 1 1 1</a><a href="#">项目 2</a><div class="name2">很长的子菜单 2</div><a href="#">项目 1</a><a href="#">项目 2</a>
CSS:
a { border: green 1px dotted;边距:2px；}a, .name1, .name2 {显示:块；空白:nowrap；}.name1 >.sub {显示:内联块；浮动:对；}.name2:在{之后内容:▶"；浮动:对；}.容器 {显示:内联块；背景:黄金；位置:相对；}.box { 显示:无；}.container:hover >.盒子 {显示:块；位置:绝对；顶部:100%；}
解决方案
最后我解决问题:
顶级菜单(悬停在我身上)<div class="box"><div class="子菜单"><div class="name">长子菜单1</div><div class="box"><a href="#">项目 1</a><a href="#">项目 2</a>
<a href="#">Item 1 1 1</a><a href="#">项目 2</a><div class="子菜单"><div class="name">很长的子菜单 2</div><div class="box"><a href="#">项目 1</a><a href="#">项目 2</a><a href="#">项目 3</a>
<a href="#">项目 1</a><a href="#">项目 2</a>
和:
.container {显示:内联块；背景:黄金；位置:相对；}.box { 显示:无；}.container:hover >.盒子 {显示:块；位置:绝对；顶部:100%；}.container .submenu {位置:相对；}.container .submenu:hover >.盒子 {显示:块；位置:绝对；顶部:0；左:100%；}一个名字 {空白:nowrap；显示:块；}.名称 {填充右:1.2em；位置:相对；}.以...命名 {内容:▶"；位置:绝对；顶部:0；左:100%；左边距:-1em；}
本质部分是将三角形元素作为block和position:relative，并通过padding-right:-1.2em为三角形预留空间> 并在元素后通过 position: absolute 定位三角形，并通过 margin-left: -1em 向后移动三角形.
I build HTML/CSS/JS menu and want to align arrow to the right to point that this element is submenu.
My problem that in Firefox triangle ("▶" sign) shown on next line instead of current line...
Chromium shown both cases fine.
There are bugs in BTS that similar to my situation:
I try 2 strategy, this my HTML structure:
<div class="name1">Submenu 1<span class="sub">▶</span></div>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<div class="name2">Submenu 2</div>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
and this my CSS which shown issue:
a, .name1, .name2 {
display: block;
white-space: nowrap;
}
.name1 > .sub {
float: right;
}
.name2:after {
content: "▶";
float: right;
}
JS Fiddle for playground.
I remember I read code where margin-right: -16px or similar used with background image or something else to make such design but I can't remember exactly how.
What workaround possible?
UPDATE I make more complete example, HTML:
<div class="container">
Top level menu
<div class="box">
<div class="name1">Very long submenu 1<span class="sub">▶</span></div>
<a href="#">Item 1 1 1</a>
<a href="#">Item 2</a>
<div class="name2">Very long submenu 2</div>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</div>
</div>
CSS:
a { border: green 1px dotted; margin: 2px; }
a, .name1, .name2 {
display: block;
white-space: nowrap;
}
.name1 > .sub {
display: inline-block;
float: right;
}
.name2:after {
content: "▶";
float: right;
}
.container {
display: inline-block;
background: gold;
position: relative;
}
.box { display: none; }
.container:hover > .box {
display: block;
position: absolute;
top: 100%;
}
解决方案
Finally I solve problem:
<div class="container">
Top level menu (hover on me)
<div class="box">
<div class="submenu">
<div class="name">Long submenu 1</div>
<div class="box">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</div>
</div>
<a href="#">Item 1 1 1</a>
<a href="#">Item 2</a>
<div class="submenu">
<div class="name">Very long submenu 2</div>
<div class="box">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</div>
</div>
and:
.container {
display: inline-block;
background: gold;
position: relative;
}
.box { display: none; }
.container:hover > .box {
display: block;
position: absolute;
top: 100%;
}
.container .submenu {
position: relative;
}
.container .submenu:hover > .box {
display: block;
position: absolute;
top: 0;
left: 100%;
}
a, .name {
white-space: nowrap;
display: block;
}
.name {
padding-right: 1.2em;
position: relative;
}
.name:after {
content: "▶";
position: absolute;
top: 0;
left: 100%;
margin-left: -1em;
}
Essential part is to make element with triangle as block and position: relative and reserve space for triangle by padding-right: -1.2em and position triangle by position: absolute after element and move back triangle by margin-left: -1em.
这篇关于与右“左三角形"对齐在菜单元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
