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

185

不是。您的填充（可能）正在应用于列表项目，因此只会影响列表项目中的实际内容。

使用的背景组合和填充风格可以创造的东西，类似于例如

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

你可能会寻找到造型添加到父列表容器（UL）来定位您的项目符号列表项，this A List Apart article有一个良好的开端参考。

来源

2009-11-10 16:31:21

+2

辉煌的解决方法！ – user1380540

+1

非常感谢，这是最好的解决方案！ –

+1

这将使列表样式比普通列表项更靠右一点，如果下面有正常列表项，则有点“关闭”。我不知道独立的解决方案，但取决于您的图像的宽度，这将改善：“margin：0 0 0 -7px;” –

69

我通常隐藏列表样式类型和使用背景图片，这是可移动

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”是什么对齐元素内的背景图像，也是相对于填充。

来源

2009-11-10 16:30:36 NickGPS

3

我觉得你真的想要做的是填充（您正在添加到<李>）添加到<UL>标记，然后要点将与<李>的文本移动。

还有你可以研究的列表式样位置。它影响线条围绕子弹图像的方式。

来源

2009-11-10 16:44:51

+0

+1提名列表式位置。 – Towa

2

像“一个达伦”的答案，但稍作修改

li 
{ 
background: url("images/bullet.gif") left center no-repeat; 
padding-left: 14px; 
margin-left: 24px; 
}

它的工作原理跨浏览器，只需调整padding和margin

编辑嵌套： 添加这种风格增加保证金左到子嵌套列表

ul ul {margin-left：15px; }

来源

2012-05-17 14:18:56

+0

无法正确使用嵌套列表。 –

+1

是的，没有嵌套，我在我的编辑 –

7

这里是我做了什么让小灰块是在左侧，并在文本与增加的线高的中心：

line-height:200%; 
padding-left:13px; 
background-image:url('images/greyblock.gif'); 
background-repeat:no-repeat; 
background-position:left center;

希望这可以帮助别人：d

来源

2012-07-03 19:43:23 kaed

11

我有同样的问题，但我不能使用后台选项（并不想使用多个背景），所以我想到了另一种解决方案

这是一个菜单的例子， a莫如/当前菜单项（默认列表样式设置为none在其他规则）

nav ul li.active>a:before{ 
    content: "■"; 
    position: absolute; 
    top: -22px; 
    left: 55px; 
    font-size: 33px; 

}

它通过使用一个正方形字符与创建一个广场“：之前的”伪类，它是通过使用自由定位绝对定位。

来源

2013-02-23 11:27:29 lad1337

5

你可以做的另一种选择，如下：

li:before{ 
    content:''; 
    padding: 0 0 0 25px; 
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px; 
}

使用（0 3px的）来定位列表图像。

适用于IE8 +，Chrome，Firefox和Opera。

我使用这个选项，因为你可以很容易地换出列表样式，很有可能你甚至不需要使用图像。（下面小提琴）

http://jsfiddle.net/flashminddesign/cYAzV/1/

UPDATE：

这将占到文本/内容进入第二行：

ul{ 
    list-style-type:none; 
} 

li{ 
    position:relative; 
} 

ul li:before{ 
    content:'>'; 
    padding:0 10px 0 0; 
    position:absolute; 
    top:0; left:-10px; 
}

添加填充左：向丽，如果你需要在子弹和内容之间有更多的空间。

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

来源

2013-04-01 19:32:47 McLeodWebDev

+0

添加解决方案将不会与新行http://jsfiddle.net/flashminddesign/cYAzV/1/ – TomSawyer

+0

更新后的版本将解决额外的行[JSfiddle]（ http://jsfiddle.net/McLeodWebDev/wfzwm0zy/） – McLeodWebDev

6

我定居到底是修改图像本身添加一些间距的解决方案。

在li上使用背景图像，因为一些建议在很多情况下都适用，但当列表与浮动图像一起使用时（例如让文本环绕图像），将失败。

希望这会有所帮助。

来源

2013-06-12 12:02:00 zeds

+1

这对于很多情况来说肯定是最简单的方法 –

14

一个可能的解决方案是还没有提到这个问题如下：

li { 
     position: relative; 
     list-style-type: none; 
    } 

    li:before { 
     content: ""; 
     position: absolute; 
     top: 8px; 
     left: -16px; 
     width: 8px; 
     height: 8px; 
     background-image: url('your-bullet.png'); 
    }

您现在可以使用上/左李：之前来定位新的子弹。请注意，li：之前的宽度和高度需要与您选择的背景图像的尺寸相同。这适用于Internet Explorer 8及更高版本。

来源

2014-02-19 14:13:26

+0

这在我看来是最好的解决方案。如果将:: before伪元素浮动到左侧，则可以达到相同的效果。 – TaylorMac

0

我发现接受的答案有点模糊，也必须与额外的填充和css命令冲突。

我从不添加填充以个人列出项目，通常控制他们的线高度和偶尔的保证金就足够了。

当我有自定义列表样式图像的对齐问题时，我只需在任何一边添加一个像素或两个额外空间来调整其相对于每个列表行的位置。

来源

2014-03-06 18:56:53 AdamJones

+0

你从来不需要处理跨浏览器渲染，不是吗？ –

6

或者你可以使用

list-style-position: inside;

来源

2015-06-10 13:29:38

0

解决方案与fontawesome

#polyNedir ul li { position:relative;padding-left:20px } 
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}

来源

2017-06-13 12:57:57

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

回答

相关问题