使用slide实现下拉菜单，无法修改label标签的Categories盒子尺寸

DevOps 小满

2026-7-24

解决下拉菜单label无法设置宽度的问题

问题根源

label标签默认是行内元素（inline），行内元素的width、height属性不生效，这就是你设置width却没变化的核心原因。另外你的HTML代码里有个明显错误：<+ class="slide">应该改成<ul class="slide">，否则下拉菜单的结构不合法。

修复步骤

修正HTML结构
把错误的标签替换成正确的列表容器：

<div class="nav-1">
  <label for="touch"><span>Categories</span></label>               
  <input type="checkbox" id="touch"> 
  <ul class="slide">
    <li><a>Lorem Ipsum</a></li>    
  </ul>
</div>

通过CSS让label支持宽高设置
给label添加display: inline-block或者display: block，把它改成能设置宽高的元素类型，再配合width属性即可：

.nav-1 label {
  display: inline-block; /* 改成行内块元素，既保留行内特性又支持宽高 */
  width: 200px; /* 自定义宽度 */
  padding: 10px;
  background: #f5f5f5;
  cursor: pointer;
}

/* 隐藏原生checkbox，用label触发下拉 */
.nav-1 input[type="checkbox"] {
  display: none;
}

/* 下拉菜单默认隐藏，checkbox选中时显示 */
.nav-1 .slide {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #f5f5f5;
}

.nav-1 input[type="checkbox"]:checked + .slide {
  display: block;
}