CSS 问题。停止移动按钮答案

【问题标题】：CSS issues. Stop displacinng of the buttonCSS 问题。停止移动按钮
【发布时间】：2016-07-13 13:46:43
【问题描述】：

我的公司网站存在一些问题。

所以我为我的网站（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 的新手...

问候露西亚

【问题讨论】：

标签： javascript html css wordpress

【解决方案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%;
}

【讨论】：

【解决方案2】：

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

这些元素有左边框：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;
}

【讨论】：