Question

我知道有一种方法可以在列表项中保留第二行文本的缩进。我正在尝试对自定义列表图像的文本段落应用类似的效果。

HTML

<p>
    <a class="bullet">
        Lorem ipsum dolorsit & consectetur adipisicing
    </a>
</p>

CSS

.bullet:before {
    background-image:url("../bullet-image.png");
    display: inline-block;
    vertical-align: middle;
    background-position: 10px 5px;
    content:"";
}

Answer 1

这就是诀窍：

<强> FIDDLE CSS：

.bullet{
    position:relative;
     padding-left:20px;
    display:block;
}

.bullet:before {
    background-image:url("../bullet-image.png");
    background-position: 10px 5px;
    content:"";
    height:15px;
    width:15px;
    position:absolute;
    top:0;
    left:0;
}

Answer 2

对indent班级

使用padding和.bullet

padding-left: 2em;
text-indent: -2em;

Answer 3

听起来你正在寻找list-style-position：

http://reference.sitepoint.com/css/list-style-position

引用：

外部外部值会导致列表标记呈现   在主要区块框外面。它的精确位置没有定义   CSS2.1规范。当代浏览器似乎渲染它   在a的主要区块框左边大约1.5em   从左到右的环境，或校长右侧的1.5em   在从右到左的环境中阻止框。有些浏览器使用填充   为标记框腾出空间的列表，而其他人使用边距。

内部里面的值使列表标记成为第一个内联框   主要区块框。它的确切位置不是由   CSS2.1规范。注意在使用里面的值时应该   文本换行到另一行然后可能在短行上发生   列表标记与文本分离的位置（当然   任何其他内联元素。）

CSS文本缩进与自定义项目符号图像

3 个答案: