如何让筛选列表边框包裹文本内容？CSS布局问题求助

你的问题根源在于固定宽高限制和图标的定位方式，以下是具体的修改方案：

问题分析 #

• .filter-item设置了固定宽高，导致内容超出后无法被边框包裹
• 图标使用position: relative手动偏移，脱离了正常文档流，边框无法识别其实际占位

修改后的完整代码 #

HTML部分 #

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://kit.fontawesome.com/1f544e41e8.js" crossorigin="anonymous"></script>

<div id="filter-content">
  <h3>Filters</h3>
    <ul id="filter-nav">
      <li class="filter-item">
        <i class="filter-icon fa-solid fa-money-bill-wave"></i>
        <span>Low cost</span>
      </li>
       <li class="filter-item">
        <i class="filter-icon fa-solid fa-child-reaching"></i>
        <span>Family-friendly</span>
       </li>
       <li class="filter-item">
        <i class="filter-icon fa-solid fa-heart"></i>
        <span>Romantic</span>
       </li>
       <li class="filter-item">
        <i class="filter-icon fa-solid fa-dog"></i>
        <span>Pets allowed</span>
       </li>
    </ul>
</div>

CSS部分 #

#filter-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 16px 0px 0px 16px;
}

#filter-nav{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    gap: 15px;
}

.filter-item{
    display: flex;
    align-items: center;
    color: black;
    font-family: Raleway;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 16px 8px 40px;
    border: 2px solid #F2F2F2;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.filter-item:hover{
    transform: scale(1.1);
    background-color: #DEEBFF;
    border-color: #DEEBFF;
}

.filter-icon{
    position: absolute;
    left: -2px;
    color: #0065FC;
    height: 24px;
    width: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background-color: #DEEBFF;
}

核心修改点说明 #

1. 移除.filter-item的固定宽高，改用padding控制内边距，让边框自动适配内容宽度
2. 将图标改为绝对定位，放在列表项内部，既保留视觉效果，又确保边框能识别其占位
3. 用flex布局统一管理容器和列表项的排列，解决换行和垂直对齐问题
4. 统一图标样式为类，减少冗余代码，方便后续扩展
5. 用gap替代margin控制间距，布局更稳定可控

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