调整列表样式的图像位置？

7 浏览
0 Comments

调整列表样式的图像位置？

有没有办法调整列表样式图像的位置？

当我为列表项使用填充时，图像将保持在其位置，并不随填充移动...

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

通常我会隐藏列表样式并使用一个可移动的背景图像

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

“7px 7px”是将背景图像对齐到元素内部的方式，同时也与填充相关。

0
0 Comments

不完全正确。你的内边距（可能）被应用于列表项上，因此只会影响列表项内的实际内容。

使用背景和内边距样式的组合可以创建类似的效果，例如：

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

你可能想要在父级列表容器（ul）中添加样式来定位你的带项目符号的列表项，这篇《A List Apart》文章提供了一个很好的起始参考。

0