javascript - 删除项目时，如何处理 ul > li 项目未按预期排列

Question

我无法按预期显示列表项。这里有一些图片可以帮助解释我的问题。

我必须动态决定显示哪些项目。我通过使用类似

的方法从 DOM 中删除 li 来控制显示

parent.removeChild(child) 

或

setting display:none;

如果我删除顶行最右边的项目，我期望如下所示

但是我最终得到了不同的东西

如果我从一行中删除任意 2 个项目，这种趋势将会继续

但是如果我从行中删除所有项目，行会正确重排

商店中显示的商品存储在 ul 中，每个商品都存储在 li 商品中。
我使用 WordPress 和 woocommerce 作为我的商店软件，因此有大量代码可能会涉及这个问题。

这是 HTML 的示例

<ul class="products">

    <li class="post-188 product type-product status-publish has-post-thumbn…rst shipping-taxable purchasable product-type-simple instock">
        <a href="https://arrc.vtc.vt.edu/mturk2/product/chewing-tobacco/">
            <img class="attachment-shop_catalog wp-post-image" width="150" height="150" alt="Chewing Tobacco" src="https://arrc.vtc.vt.edu/mturk2/wp-content/uploads/2014/10/Chewing-Tobacco-150x150.jpeg"></img>
            <h3>

                Chewing Tobacco

            </h3>
            <span class="price">
                <span class="amount">

                    $4.35

                </span>
            </span>
        </a>
        <a class="button add_to_cart_button product_type_simple" data-quantity="1" data-product_sku="dip" data-product_id="188" rel="nofollow" href="/mturk2/?add-to-cart=188">

            Add to cart

        </a>
    </li>
    <li class="post-91 product type-product status-publish has-post-thumbna…l shipping-taxable purchasable product-type-variable instock"></li>
    <li>...

这是处理显示项目的 CSS

/* 2.4.1 Product Gallery */
.product-gallery {position: relative;margin:0 0 30px;}
.product-gallery ul.products { border-top:0; }
ul.products { margin-left:0; padding-left:2px; padding-right:2px; padding-top:2px; zoom:1; }
ul.products .added_to_cart { display: block; padding-top:.5em; }
ul.products:before, ul.products:after {  content:""; display:table; }
ul.products:after { clear: both; }
ul.products li { width:30.75%; float: left; list-style: none; position: relative; margin-right:3.8%; text-align: center; margin-bottom:2.618em; }
ul.products li.first { clear: left; }
ul.products li.last { margin-right:0; }
ul.products a img { width:100%; height: auto; padding:0; border:0; background: #fff; border-radius:3px; -webkit-box-shadow:0 0 3px rgba(0,0,0,0.25); -moz-box-shadow:0 0 3px rgba(0,0,0,0.25); box-shadow:0 0 3px rgba(0,0,0,0.25); -webkit-transition: all ease-in-out .2s; }
ul.products a:hover img {opacity:0.8; }
ul.products li a h3 { font-size:1em; display: block; padding-top:0; }
ul.products li a:hover h3 { color:#111; }
ul.products li a:hover { text-decoration: none !important; }
ul.products li .price {
    position: absolute;
    top:10px;
    right:-6px;
    background: #d23d46;
    padding:2px 12px 2px 8px;
    font-size:0.8751em;
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.25);
}
ul.products li .price:before {
    content: "";
    border:14px solid red;
    border-right-width:2px;
    border-color:#d23d46 #d23d46 #d23d46 transparent;
    position: absolute;
    top:0;
    left:-14px;
}
ul.products li .price:after {
    content: "";
    border:6px solid red;
    border-color: #892026 transparent transparent transparent;
    border-left-width:0;
    position: absolute;
    right:0;
    bottom:-12px;
}
ul.products li a.button { margin:0;  }
.onsale {
    background-color: #96c42e;
    position: absolute;
    top:10px;
    left:-6px;
    padding: 2px 8px;
    font-size: 0.8751em;
    text-align: center;
    color:#fff;
    z-index: 999;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.onsale:before {
    content: "";
    border:14px solid #96c42e;
    border-color:transparent transparent transparent #96c42e;
    position: absolute;
    top:0;
    right:-28px;
}
.onsale:after {
    content: "";
    border:6px solid #67861f;
    border-color: #67861f transparent transparent transparent;
    border-right-width:0;
    position: absolute;
    left:0;
    bottom:-12px;
}
ul.products li del { color:#ccc; }
ul.products li ins { text-decoration:none; }

Answer 1

主要是CSS问题。

您将需要这些覆盖:

ul.products li.last {
    margin-right: 3% !important;
}

ul.products li {    
    margin-right: 3%;
    width: 30%;
}

.last {
    clear: none;
}


ul.products li.first {
    clear: none;
}

问题是你的 WordPress 模板将第一个和最后一个类附加到每一行。此外，宽度和右边距大于 100%，这会产生环绕效果。