Question

我的商家网站存在一些问题。

所以我为我的网站（Wordpress）购买了一个主题并下载了一些扩展名，因为它包含在主题中。不幸的是我看到了一些问题，当我通过我的浏览器Chrome / Firefox缩小时，正确的图片“Teilen”转移到下一行，我想强制它保持原来的状态。

以下是代码：

.products li.product.grid.with-hover .product-actions {
    top: 5px;
    left: 19px;
    right: 19px;
    padding-top: 13px;
    text-align: center;
    position: absolute;
    border-top: 0;
}

<div class="product-actions">
                        <a class="out-of-stock" title="Vergriffen">Vergriffen</a>            <a href="#" class="button yith-wcqv-button" data-product_id="2150">Quick View</a>                        <div class="buttons buttons_3 group">
                <a href="http://lockpick.ch/produkt/goso-kaba-deluxe-dietriche/" rel="nofollow" title="Details" class="details">Details</a>

<div class="yith-wcwl-add-to-wishlist add-to-wishlist-2150">
		    <div class="yith-wcwl-add-button hide" style="display: none;">

	        
<a href="/?add_to_wishlist=2150" rel="nofollow" data-product-id="2150" data-product-type="simple" class="add_to_wishlist" style="zoom: 1;">
        Wunschliste<div class="blockUI" style="display:none"></div><div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.6; cursor: none; position: absolute; background: url(&quot;http://lockpick.ch/wp-content/themes/bazar/theme/assets/images/ajax-loader.gif&quot;) center center no-repeat rgb(255, 255, 255);"></div><div class="blockUI blockMsg blockElement" style="z-index: 1011; display: none; position: absolute; left: 32px; top: 25px;"></div></a>
<img src="http://lockpick.ch/wp-admin/images/wpspin_light.gif" class="ajax-loading" alt="loading" width="16" height="16" style="visibility: hidden;">
	    </div>

	    <div class="yith-wcwl-wishlistaddedbrowse show" style="display: block;">
	        <span class="feedback">Produkt hinzugefügt!</span>
	        <a href="http://lockpick.ch/wishlist/view/">
	            Wunschliste ansehen	        </a>
	    </div>

	    <div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">
	        <span class="feedback">Dieses Produkt ist bereits in der Wunschliste vorhanden.</span>
	        <a href="http://lockpick.ch/wishlist/view/">
	            Wunschliste ansehen	        </a>
	    </div>

	    <div style="clear:both"></div>
	    <div class="yith-wcwl-wishlistaddresponse"></div>
	
</div>

<div class="clear"></div>

<a href="#" class="yit_share share">Teilen</a>            </div>
                    </div>

CSS问题

网站： www.lockpick.ch

希望你能帮助我，因为我完全是CSS / HTML的新手......

问候露西亚

Answer 1

问题来自于这些元素的宽度为33.3333％。虽然在大多数情况下，这种近似值的1/3有效，但在某些情况下，它最终会出现问题，3个元素的宽度略高于100％。

一个简单的解决方法是将此33.3333％编辑为33％。在视觉上，用户不应该看到右侧缺少1％并且它解决了您的问题。

从您提供的网站链接中，它位于style.css第675行：

ul.products li.product.grid.with-hover .product-actions .buttons.buttons_3 > *, 
.product-box .buttons.buttons_3 > * {
        width: 33%;
}

Answer 2

请尝试这样:)因为默认情况下，box-sizing是content-box，这意味着width和height属性（以及min / max属性）仅包含内容。边框，填充或边距不包括在内。

这些元素有border-left：1px solid＃e0dfdf;宽度：33.333％。在较小的屏幕中，每个元素将具有较小的宽度，例如小于100px导致1px边界成本超过宽度的1％。然后将最后一个元素下推到下一行。

ul.products li.product.grid.with-hover .product-actions .buttons a.details, .product-box .buttons a.details {
   box-sizing: border-box;
}

CSS问题。停止按下按钮

2 个答案: