怎样让无序列表li里的文字离小黑点近点

Question

ul/li是放在tr/td里的。ui/li的文字离开左面的黑点太远了，对li的样式使用了padding-right但是没有效果。请问要怎么改呢？

        <tr>
            <td>
                <ui>
                    <li style="padding-left: 7px; border: 1px solid red;padding-right: 5px">
                        抢单奖励：100元
                    </li>
                </ui>
            </td>
        </tr>

Answer 1

两种方案:

1 使用负 margin

    <li><span>抢单奖励</span></li>
    
    <style>
        li span {
           margin-left: -10px;
        }
    </style>

2 使用伪类来替代你前面的黑点

    <li>抢单奖励</li>
    <style>    
        ul {
            list-style:none;
        }
        
        ul li::before {
          content: "";
          display: inline-block;
          width:5px;
          height:5px;
          background-color: #333;
          vertical-align: middle;
          border-radius: 100%;
        }
    </style>

一般推荐用第二种, 这样不需要去添加额外的包裹元素.