React中Filter区块margin异常占用右侧空间问题求助

数据老陈

2026-7-16

问题：Filter组件异常margin占用右侧空间，导致Product组件无法正常布局

问题详情

给Filter组件设置了width:15vw，希望它固定在页面左侧，右侧放置Product组件。
实际页面中，Filter区块存在浅色橙色的异常margin，占用了右侧全部空间，尝试添加margin-right:0无效，需要移除该异常margin。

相关代码

Filter.jsx

import React from 'react';
import './Filter.css';
import Sort from './Sort';
function Filter()
{
    return(
        <div className='filter'>
        <h2>Filter</h2>
        <ul className='categories'>
        <li>
        <div className='catItems'>
        <input type='checkbox'></input>
        <span>None</span>
        </div>
        <div className='catItems'>
        <input type='checkbox'></input>
        <span>Electroics</span>
        </div>
        <div className='catItems'>
        <input type='checkbox'></input>
        <span>Home Needs</span>
        </div>
        <div className='catItems'>
        <input type='checkbox'></input>
        <span>Clothing</span>
        </div>
        <div className='catItems'>
        <input type='checkbox'></input>
        <span>Toys</span>
        </div>
        </li>
        </ul>
        <Sort/>
        </div>
    );
}
export default Filter;

Filter.css

.filter {
    width: 15vw;
    height: 500px;
    background-color: rgb(255, 149, 0);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Add this line */
  }
  
  .categories {
    margin: 0;
    padding: 0;
  }
  
  .catItems {
    display: flex;
    flex-direction: row;
    margin: 5px;
  }
input[type="checkbox"]
{
    width: 20px;
    margin-right:4px;
}
.sort button{
    border-radius: 5px;
    margin-left: 5px;
}