如何实现Shopify集合过滤器的水平对齐？

问题说明 #

需要将Shopify集合过滤模块的过滤器实现水平对齐，效果参考下图：

当前使用的CSS代码如下：

.filter-group-summary{
    position: relative;
    display: flex;
    padding: 12px 0;
  }

  [open] .filter-group-summary::before{
    transform: translate(-50%) rotate(180deg);
    transition: transform ease 300ms;
  }
  .filter-group-summary::after{
    position: absolute;
    content: '';
    width: 5px;
    height: 2px;
    right: 10px;
    top: 50%;
    transform: translate(-50%);
    background-color: #333;
  }

  .filter-group-summary::before{
    position: absolute;
    content: '';
    width: 5px;
    height: 2px;
    right: 10px;
    top: 50%;
    transform: translate(-50%) rotate(90deg);
    background-color: #333;
  }

对应的Shopify HTML代码：

<form class="filter-form">
        {% for filter in collection.filters %}
          <details class="filter-group">
            <summary class="filter-group-summary">
              <div>
                <span>{{ filter.label }}</span>
                {% if filter.active_values.size > 0 %}
                  <span>({{ filter.active_values.size }})</span>
                {% endif %}
              </div>
            </summary>

            <div class="filter-group-display">
              <div class="filter-group-display__header">
                <span class="filter-group-display__header-selected">{{ filter.active_values.size }} selected</span>
                {% if filter.active_values.size > 0 %}
                  <a href="{{ filter.url_to_remove }}" class="filter-group-display__header-reset">Reset</a>
                {% endif %}
              </div>

              {% case filter.type %}
                {% when 'boolean', 'list' %}
                <ul class="filter-group-display__list">
                  {% for filter_value in filter.values %}
                    <li class="filter-group-display__list-item">
                      <label for="Filter-{{ filter.param_name }}-{{ forloop.index }}">
                        <input
                          type="checkbox"
                          name="{{ filter_value.param_name }}"
                          value="{{ filter_value.value }}"
                          id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
                          {% if filter_value.active %}checked{% endif %}
                          {% if filter_value.count == 0 and filter_value.active == false %}disabled{% endif %}>{{ filter_value.label }}
                      </label>
                    </li>
                  {% endfor %}
                </ul>
                <div class="filter-btn">
                {% when 'price_range' %}
                <div class="filter-group-display__price-range">
                  <div class="filter-group-display__price-range-from">
                    <span>{{ cart.currency.symbol }}</span>
                    <input name="{{ filter.min_value.param_name }}"id="Filter-{{ filter.min_value.param_name }}"{% if filter.min_value.value %}value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"{% endif %}type="number"placeholder="0"min="0"max="{{ filter.range_max | money_without_currency | replace: ',', '' }}">
                    <label for="Filter-{{ filter.min_value.param_name }}">From</label>
                  </div>
                  <div class="filter-group-display__price-range-to">
                    <span>{{ cart.currency.symbol }}</span>
                    <input name="{{ filter.max_value.param_name }}"id="Filter-{{ filter.max_value.param_name }}"{% if filter.max_value.value %}value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"{% endif %}type="number"placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"min="0"max="{{ filter.range_max | money_without_currency | replace: ',', '' }}">
                    <label for="Filter-{{ filter.max_value.param_name }}">To</label>
                  </div>
                </div>
              {% endcase %}
            </div>
          </details>
        {% endfor %}

        <div class="active-filters">
          <a
            href="{{ collection.url }}?sort_by={{ collection.sort_by }}"
            class="active-filters__clear"
            id="clear-all">Clear all</a>
          {% for filter in collection.filters %}
            {% if filter.type == "price_range" %}
              {%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
                <a class="active-filters__remove-filter" href="{{ filter.url_to_remove }}">
                  {%- assign min_value = filter.min_value.value | default: 0 -%}
                  {%- assign max_value = filter.max_value.value | default: filter.range_max -%}
                  {{ min_value | money }} - {{ max_value | money }} X
                </a>
              {%- endif -%}
            {%- else -%}
              {%- for filter_value in filter.active_values -%}
                <a class="active-filters__remove-filter" href="{{ filter_value.url_to_remove }}">
                  {{ filter.label }}: {{ filter_value.label }} X
                </a>
              {%- endfor -%}
            {%- endif-%}
          {%- endfor -%}
        </div>
      </form>

解决方案 #

要实现过滤器的水平对齐，核心是调整容器和过滤器项的布局规则，具体修改如下：

1. 给.filter-form添加Flex布局，让内部过滤器横向排列：

.filter-form {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  gap: 16px; /* 过滤器之间的间距，可按需调整 */
  padding: 12px 0;
}

2. 调整.filter-group的宽度规则，确保每个过滤器有合适的横向空间：

.filter-group {
  flex: 1 1 220px; /* 自动分配可用空间，最小宽度220px */
  border: 1px solid #e5e5e5; /* 可选，添加边框区分过滤器 */
  border-radius: 4px;
  padding: 0 12px;
}

3. 优化.filter-group-summary的内部对齐，让标题和箭头分布合理：

.filter-group-summary {
  justify-content: space-between; /* 标题居左，箭头居右 */
  align-items: center; /* 垂直居中 */
  cursor: pointer;
}

4. 修正箭头的定位，适配新的布局：

.filter-group-summary::before,
.filter-group-summary::after {
  right: 0; /* 改为容器右侧，避免超出 */
  transform: translate(0, -50%); /* 仅垂直居中 */
}

完成以上修改后，所有过滤器就会水平排列，同时支持响应式换行，适配不同屏幕宽度。

内容的提问来源于stack exchange，提问作者Hyun Hae Park