gpt4 book ai didi

html - 用自定义符号替换列表元素符号(右对齐)

转载 作者:太空宇宙 更新时间:2023-11-04 02:52:24 24 4
gpt4 key购买 nike

我需要构建一个菜单(悬停时)将“弹出”一个子菜单,其中包含描述和 2 级子菜单列表。实际上,出于测试目的,我没有隐藏子菜单.

我的测试代码:

.menu-l1>li {
display: inline-block;
padding: 0 20px;
}
.details {
position: absolute;
background: yellow;
margin-top: 1em;
ul {
direction: rtl;
margin-left: 0;
li {
text-align: center;
&:nth-child(odd) {
background: lightblue;
}
&:nth-child(even) {
background: lightgreen;
}
}
}
}
<ul class="menu-l1">
<li><a href="#">first menu</a>
<div class="details">
<div>header</div>
<ul class="menu-l2">
<li><a href="#">sub</a></li>
<li><a href="#">sub long</a></li>
</ul>
</div>
</li>
<li><a href="#">second menu</a>
<div class="details">
<div>2 header</div>
<ul class="menu-l2">
<li><a href="#">1 sub-menu long</a></li>
<li><a href="#">2 sub-menu</a></li>
</ul>
</div>
</li>
</ul>

这给出(当 SCSS 激活时)像这样的东西(JsFiddle here)

enter image description here

没关系,因为我需要列表的元素符号右对齐,文本居中对齐。

  1. 我需要用自定义符号“>”替换元素符号;

    1.* 理想情况下,“>”符号应该与主链接“链接”

  2. 我需要修复第二个子菜单在右侧显示数字时的“错误”(?)(应该是“2 子菜单”而不是“子菜单” 2")...

最佳答案

http://jsfiddle.net/JDERf/598/

这里只改变:

ul {
padding:0;
list-style:none;
li {
a {
display: block;
padding:0 1em 0 0;
position: relative;
&:after {
content:">";
position: absolute;
right:0;
}
}
}

你不需要 rtl。您可以使用 :before 或 :after 伪元素并为其设置任何字符或背景图像。最好使用 display:block 使链接更大,并将我们的伪元素相对于它定位。

关于html - 用自定义符号替换列表元素符号(右对齐),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32779640/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com