如何从子弹中缩进列表项？

Question

我有一个列表项，其中有一个子弹通过CSS添加。问题是，文本包含在每个子弹下，我似乎无法用文本缩进来设置它。这是小提琴：http://jsfiddle.net/4wDL5/

CSS：

li {
    list-style: none;
    font-size: 20px;
}

li:before {
    content:"·";
    font-size:120px;
    vertical-align:middle;
    line-height:20px;
}

Answer 1

使用:before和列表项的定位：

li {
    list-style: none;
    font-size: 20px;
    padding-left: 50px;
    position: relative;
}
li:before {
    content:"·";
    font-size:120px;
    vertical-align:middle;
    line-height:20px;
    display: block;
    position: absolute;
    left: 5px;
    top: 5px;
}

预览：

小提琴：http://jsfiddle.net/praveenscience/4wDL5/778/

Answer 2

试试这个：

ul
{
list-style-position:inside;
}

See demo on w3schools

Answer 3

尝试这样的事情

li {
  font-size: 20px;

 white-space: nowrap;
}

FIDDLE

Answer 4

试试这段代码

DEMO

li {
    list-style: none;
    font-size: 20px;
margin-left: 50px;
}

li:before {
    content:"·";
    font-size:120px;
    vertical-align:middle;
    line-height:20px;
position: absolute;
left:0;
}

Answer 5

一个非常快速的解决方案。
添加填充左：40px到你的李
添加margin-left：-40px到你的li：之前

    li {
       list-style: none;
       font-size: 20px;
       padding-left: 40px;
    }

    li:before {
        content:"·";
        font-size:120px;
        vertical-align:middle;
        line-height:20px;
        margin-left: -40px;
    }