React表单开发中如何缩小列表图标与标签的间距

我在React项目中编写了如下表单：

需求为缩小列表图标（list-icon）与标签之间的间距，当前使用的CSS样式如下：

.form__container {
  display: flex;
  flex-wrap: wrap;
}

.form__container input {
  color: rgb(115, 0, 255);
  size: 100%;
  position: relative;
  flex-wrap: wrap;
  width: 300px;

}

.form__container li ul {
  flex-wrap: nowrap;
  width: 100px;
}

对应React组件代码如下：

return (
    <div>
      <FormValidator emitter={this.emitter} />
      <div >
        <form 
          encType='multipart/form-data' 
          action={this.props.form_action} 
          method={this.props.form_method}
          className='form__container'
        >
          { this.props.authenticity_token &&
            <div style={formTokenStyle}>
              <input name='utf8' type='hidden' value='&#x2713;' />
              <input name='authenticity_token' type='hidden' value={this.props.authenticity_token} />
              <input name='task_id' type='hidden' value={this.props.task_id} />
            </div>
          }
          {items}
        </form>
        <div>
          {validationList}
        </div>
      </div>
    </div>
  )

现有CSS未针对列表图标与标签的间距做定向设置，且存在选择器逻辑错误，按以下步骤调整即可实现需求：

• 重置列表默认边距：浏览器默认给<ul>、<li>元素预置了内外边距，会撑开图标与文字的空隙，先清除这部分默认样式

  .form__container ul, 
  .form__container li {
    margin: 0;
    padding: 0;
    list-style: none; /* 如果是自定义list-icon可以直接去掉默认列表标记，避免原生标记占位 */
  }
  

• 修正原有错误选择器：原代码中.form__container li ul选择器匹配的是li内部嵌套的ul，不符合常规列表DOM结构，将列表项设置为flex布局，用gap属性直接控制图标和标签的间距，是最精准无副作用的方案

  .form__container li {
    width: 100px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px; /* 调整这个数值即可控制图标和标签的间距，数值越小间距越窄 */
  }
  

• 如果保留原生列表标记而非自定义图标，增加list-style-position: inside让标记和文本处于同一内容流，避免标记占据li的padding区域产生多余空隙：

  .form__container ul {
    list-style-position: inside;
  }
  

• 如果是自定义的.list-icon元素，也可以直接给该元素设置右侧外边距控制间距：

  .form__container .list-icon {
    margin-right: 4px; /* 按需调整数值 */
  }
  

注意：原有给input设置的size: 100%属于无效CSS属性，size是input的原生标签属性，CSS中控制尺寸应使用width/height，该条规则可以删除，避免无效样式干扰渲染。

内容的提问来源于stack exchange，提问作者Mahima