![]() |
1
0
https://jsfiddle.net/11gkrju0/7/
首先要注意的是,我添加了一个
然后 非居中列表的边界很容易捕捉:
对于居中列表,它们会稍微改变:
要使滚动条向右,我们需要更改
我们可以看到,只有第一个和最后一个孩子是需要改变的。由于文本定义了每个子级的宽度,因此我们无法更改width属性,但我们可以更容易地将一些定义的值除以2:font-size、padding。
现在列表可能看起来更像
但问题是文本和填充现在都变小了。我们可以做的是将真正的按钮代理到
在DOM中,我们可以编写这种CSS来创建假按钮,看起来就像真的一样(更不用说,隐藏真的……)
快到了,快到了。。。 第一个子元素和最后一个子元素都被修改了,所以它们的伪子元素也被修改了……副作用是宽度将按6px的字体大小计算。因此,我们需要将宽度设置回所需的两倍,并重置字体大小以防止继承。
最后,我们将第一个元素填充到其宽度的一半,以防止与第二个元素发生碰撞。
我们本来可以用
希望它能帮助别人。 |
![]() |
Softly · 单选按钮未按预期取值 1 年前 |
|
NovoMannen · 导航中的下拉菜单在内容后面重叠 1 年前 |
|
eXor420 · 如何在脚本标记中使用导出的函数? 1 年前 |
![]() |
IonicMan · 剑道网格在宽度过大时不显示某些列 1 年前 |
![]() |
Kernier · 如何将数学公式支持添加到StacksEditor? 1 年前 |
|
Md. Ibrahim · CSS网格项溢出小屏幕滚动 1 年前 |
|
Akshay mek · Vscode扩展建议不适用于某些文件夹 1 年前 |