带有伪选择器和对齐的自定义 ul 项目符号 [英] Custom ul bullet with pseudo-selector and alignment

问题描述

我用伪选择器为 ul 制作了一个自定义项目符号.但我希望链接文本位置在内部对齐.我怎么做?这是 Fiddle http://jsfiddle.net/bodyfarmer/13q91433/1/ 的链接

I made a custom bullet for ul with pseudo-selector. But I want the link text position to be align inside. How do I do that? Here's the link to the Fiddle http://jsfiddle.net/bodyfarmer/13q91433/1/

CSS:

ul {
/*  list-style-position: outside; */    
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 30px;
    list-style: none; 
}

li:before {
    content: "\00BB";
    padding-right: 0.5em;
}

HTML:

<ul>
    <li>Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here </li>
    <li>Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here </li>
</ul>

推荐答案

您可以按照以下方式进行，必要时调整 -1em.

You could do it as the follows, and adjust -1em if necessary.

http://jsfiddle.net/dyd9topy/

ul {  
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 30px;
    list-style: none; 
}
li:before {
    content: "\00BB";
    display: inline-block;
    text-indent: -1em;
}

<ul>
    <li>Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here </li>
    <li>Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here Link text here </li>
</ul>

这篇关于带有伪选择器和对齐的自定义 ul 项目符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！