如何调节li中的span与input中的位置关系和对齐

要调整`<li>`中的`<span>`元素与`<input>`元素的位置关系和对齐，可以利用CSS来控制它们的布局。下面是一些常用的技巧：

1. **内联元素对齐**：
如果`<span>`和`<input>`都是行内元素（比如`display: inline-block`），你可以使用`text-align`属性来设置文本水平对齐，例如：

   .your-class {
       text-align: center; /* 设置为居中 */
   }

2. **浮动布局**：
如果需要它们并排显示，可以将它们都设置为浮动，然后给包含它们的容器添加清除浮动：

   span, input {
       float: left;
       margin-right: 10px; /* 控制间距 */
   }
   
   .container {
       overflow: auto; /* 清除浮动影响 */
   }

这样`<span>`和`<input>`会在一行上并列。

3. **Flexbox或Grid布局**：
使用现代浏览器支持的弹性盒模型（Flexbox）或网格布局（Grid）更方便：

   .parent-container {
       display: flex; /* 或者 display: grid; 根据需求选择 */
       align-items: center; /* 使内容垂直居中 */
   }
   
   input, span {
       flex: 1; /* Flexbox自动分配空间 */
       /* 或者 grid-column: 1 / 2; (如果使用Grid) */
   }

这会让`<span>`和`<input>`在容器内部居中，并保持在同一行。

记得根据实际HTML结构和样式需求来应用这些规则，替换`.your-class`, `.container`, `parent-container`等为实际的选择器。