javascript - CSS 问题。停止替换按钮

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%;
}