调整列表样式图像位置？

Question

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

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

Answer 1

并不是的.您的填充(可能)应用于列表项,因此仅影响列表项中的实际内容.

使用背景和填充样式的组合可以创建看起来类似的东西,例如

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文章具有良好的起始引用.

Answer 2

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

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"是对齐元素内部的背景图像,也是相对于填充的.

Answer 3

尚未提及的此问题的可能解决方案如下:

    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的顶部/左侧:之前定位新子弹.请注意,li的宽度和高度:之前需要与您选择的背景图像尺寸相同.这适用于Internet Explorer 8及更高版本.

Answer 4

我有同样的问题,但我无法使用背景选项(并且不想使用多个背景)所以我想到了另一个解决方案

这是一个菜单的示例,该菜单具有活动/当前菜单项的方形指示符(在另一个规则中默认列表样式设置为none)

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

}

它通过使用带有":before"伪类的方形字符创建一个正方形,并且可以通过使用绝对定位自由定位.

Answer 5

这就是我所做的让小灰色块位于文本的左侧和中间,并增加了线高:

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

希望这有助于某人:D

Answer 6

您可以做的另一个选择是:

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/

更新:

这将考虑进入第二行的文本/内容:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

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

如果你想在项目符号和内容之间留出更多空间,请向li添加padding-left:.

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

Answer 7

我最终解决的解决方案是修改图像本身以增加一些间距.

在li上使用背景图像,因为有些建议可以在很多情况下使用,但是当列表与浮动图像一起使用时会失败(例如,使文本环绕图像).

希望这可以帮助.

Answer 8

或者你可以使用

list-style-position: inside;

Answer 9

我正在使用这样的东西，对我来说似乎很干净和简单：

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

上面的代码在我的大多数情况下都可以正常工作。
要进行精确调整，您可以修改vertical-align，例如：

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

如果您愿意，您可以设置list-style: noneonli而不是ul。