Leaflet图层控件展开后文本与复选框/单选框对齐问题求助

针对图层控件展开后复选框/单选框与标签文本错位的问题，以下是几种针对性的CSS修复方案：

方案一：基础对齐重置 #

强制控件内的选择器和标签垂直居中对齐，修正行高和边距：

.leaflet-control-layers-expanded .leaflet-control-layers-selector {
  vertical-align: middle;
  margin-top: 0;
}

.leaflet-control-layers-expanded label {
  vertical-align: middle;
  line-height: 1.4;
  display: inline-block;
}

方案二：提升选择器权重（解决样式覆盖问题） #

如果自定义样式或第三方CSS覆盖了Leaflet默认样式，使用更具体的选择器强制生效：

.leaflet-control-layers .leaflet-control-layers-list .leaflet-control-layers-selector {
  position: relative;
  top: 0;
  vertical-align: baseline;
}

.leaflet-control-layers .leaflet-control-layers-list label {
  display: inline;
  margin-left: 4px;
}

方案三：修复全局样式冲突 #

如果全局CSS对input或label设置了浮动、定位等属性，针对性重置控件内的元素：

.leaflet-control-layers-expanded input[type="checkbox"],
.leaflet-control-layers-expanded input[type="radio"] {
  float: none !important;
  vertical-align: middle;
}

额外排查点 #

1. 确认Leaflet官方CSS文件已正确引入，且版本与JS文件匹配
2. 检查是否有自定义CSS对.leaflet-control-layers相关类设置了padding、margin或display属性，导致布局错位

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