关于list-style使用图片之后的间距问题

Question

目前的效果如下：

html代码：

                        <ul  class = "ul-sv-list"  >
                            <li>档案调阅服务</li>
                            <li>档案调阅服务</li>
                            <li>档案调阅服务</li>
                        </ul>

css代码：
.ul-sv-list{

margin-top:10px;

}
.ul-sv-list li{

color : #688499;
font-size : 12px;
display: list-item;
list-style: square inside url("../../images/icon/square.png");
line-height:25px;

}

效果图如下：

请问如何让那个方块离右侧的文字远一点，并且与文字居中对齐。

Answer 1

换个思路

*{margin: 0; padding: 0}
.ul-sv-list{
    margin-top:10px;
    margin-left: 20px;
}
.ul-sv-list li{
    position: relative;
    color : #688499;
    font-size : 12px;
    display: list-item;
    line-height:25px;
    list-style: none;
    padding-left: 20px;/*改变文字与点之间的距离*/
}

.ul-sv-list li:before{
    position: absolute;
    content: '';
    width: 10px;/*宽高*/
    height: 10px;
    top:50%;
    left: 0;
    margin-top: -5px;/*绝对定位垂直居中*/
    /*background-color: #688499;*/ /* 纯色 */
    border-radius: 50%;/*圆角*/
    /*以下是引用图片*/
    background-image: url("http://www.w3school.com.cn/ui2017/compatible_chrome.png");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

Answer 2

往里面加个span简单实现，不知道是不是楼主要的效果

<ul class="ul-sv-list">
  <li><span>档案调阅服务</span></li>
  <li><span>档案调阅服务</span></li>
  <li><span>档案调阅服务</span></li>
</ul>
<style>
.ul-sv-list{

margin-top:10px;
}
.ul-sv-list li{

color : #688499;
font-size : 12px;
display: list-item;
list-style: square inside url("../../images/icon/square.png");
line-height:25px;
 height:25px;
}
.ul-sv-list li span{
padding-left:100px
}
</style>

效果

Answer 3

1.居中对齐，list-style 默认就是居中的，你可以把图片去掉看效果list-style: square inside; 可以看看图片是不是有空白区域

2.如果想控制间距，建议这样来设置，更灵活<li><i class="icon"></i>这是测试内容</li>，如果非要用list-style 控制的话，有两个值 inside 和 outside

Answer 4

如果不想借助背景实现，那么可以看这个方法：

把li的内容包在行内元素a下，然后控制a来实现

<ul  class = "ul-sv-list"  >
  <li><a>档案调阅服务</a></li>
  <li><a>档案调阅服务</a></li>
  <li><a>档案调阅服务</a></li>
</ul>

*{margin: 0; padding: 0}
.ul-sv-list{
    margin-top:10px;
    margin-left: 20px;
}
.ul-sv-list li{
color : #688499;
font-size : 12px;
display: list-item;
list-style: square inside url("https://segmentfault.com/favicon.ico");
line-height:25px;
}
.ul-sv-list li a{
  vertical-align:10px;/*列表标志图片与文字对齐*/
  margin-left:10px;/*列表标志图片与文字分隔距离*/
}

效果如下 https://jsfiddle.net/g5oq3kjc/3/