可是多个并列li中的span大小不一，会导致每一行的input左边无法对齐怎么解决

如果你遇到多个并列的`<li>`元素，其中的`<span>`大小不一致，导致对应的`<input>`元素左侧无法对齐，可以尝试以下几种方法来解决这个问题：

1. **固定宽度**：
给每个`<input>`设置固定的宽度，使其不受`<span>`大小的影响，同时使用百分比或固定像素值，以适应不同长度的`<span>`。例如：

   input {
       width: calc(100% - max-content); /* 减去最长span的宽度 */
       /* 或者 */
       width: 25%; /* 避免直接依赖span，设置每列输入框占总宽度的25%，留出间隙 */
   }

2. **动态调整输入框边缘**：
如果你想让输入框紧贴`<span>`右边，可以计算`<span>`的实际宽度，并以此为基础调整`<input>`的左边缘。这通常需要一些JavaScript配合，如jQuery:

   $('.li-element').each(function() {
       var spanWidth = $(this).find('span').outerWidth();
       $(this).find('input').css('left', 'calc(100% - ' + spanWidth + 'px)');
   });

3. **使用Flexbox布局**：
利用Flexbox的特性，你可以使`<input>`自适应`<span>`，而不会受到其大小的影响：

   li {
       display: flex;
       align-items: center;
   }
   input {
       flex: 1; /* 自动分配剩余空间 */
   }

4. **表格布局**：
如果所有`<li>`元素需要按行对齐，可以考虑转换成表格布局，使每个单元格宽度相等：

<div class="table">
    <div class="cell">
        <span>...</span>
        <input type="...">
    </div>
    <!-- 更多li... -->
</div>

<style>
.table {
    display: table;
}
.cell {
    display: table-cell;
}

根据实际情况和兼容性需求选择最适合的方法。