Html “向右对齐”;“左三角形”;在菜单元素中
我构建了HTML/CSS/JS菜单,并希望向右对齐箭头,以指向该元素是子菜单 我的问题是Firefox三角形(“▶" 符号)显示在下一行而不是当前行 铬显示两种情况都很好 BTS中存在与我的情况类似的错误:Html “向右对齐”;“左三角形”;在菜单元素中,html,css,firefox,menu,Html,Css,Firefox,Menu,我构建了HTML/CSS/JS菜单,并希望向右对齐箭头,以指向该元素是子菜单 我的问题是Firefox三角形(“▶" 符号)显示在下一行而不是当前行 铬显示两种情况都很好 BTS中存在与我的情况类似的错误: 我尝试2种策略,这是我的HTML结构: <div class="name1">Submenu 1<span class="sub">▶</span></div> <a href="#">Item 1</a>
<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>
去操场
我记得我读过这样的代码:marginright:-16px
或与背景图像或其他东西一起使用的类似代码,但我记不清具体是怎么做的
可能的解决办法是什么
更新我制作,HTML:
摆脱“空白:nowrap”有助于最后我:
基本部分是将三角形作为
block
和position:relative
的元素,并通过padding right:-1.2em
为三角形保留空间,通过position:absolute
在元素之后定位三角形,并通过margin left:-1em
向后移动三角形。是的,但正如我提到的,我构建了我自己nu和空白:需要nowrap
以防止菜单元素变为多行。。。
a, .name1, .name2 {
display: block;
white-space: nowrap;
}
.name1 > .sub {
float: right;
}
.name2:after {
content: "▶";
float: right;
}
<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>
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%;
}
<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>
.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;
}