老师，第四行的小圆点对着文本部分的中间，而其它行的圆点却对着文本部分的下部，是什么原因造成的呢，怎么优化呀

来源：3-7 小慕医生项目开发

qq_MrSilver_0

2021-07-23 17:42:23

相关代码：

<ul>
        <li style="width: 400px;">
            <span style="display: inline-block; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 200px;">
                <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></span>                                    
            <span style="float: right;">01/01</span>
        </li>
        <li style="width: 400px;">
            <span style="display: inline-block; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 200px;">
                <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></span>                                    
            <span style="float: right;">01/01</span>
        </li>
        <li style="width: 400px;">
            <span style="display: inline-block; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 200px;">
                <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></span>                                    
            <span style="float: right;">01/01</span>
        </li>
        <li style="width: 400px;">
                <span><a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxx</a></span>                                    
            <span style="float: right;">01/01</span>
        </li>
        <li style="width: 400px;">
            <span style="display: inline-block; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 200px;">
                <a href="">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></span>                                    
            <span style="float: right;">01/01</span>
        </li>

    </ul>

    问题描述：想要的实现的效果就是文本部分输入的数据过长时会自动以省略号隐藏起来，效果是实现了，但是li标签好像被撑大了
    ，前面的小圆点无法对其文本部分的中间，怎么优化呀老师，