文本框被拉伸和移動上攻一旦我們點擊按鈕

Question

請訪問link

這是電子商務網站，大家可以放心購買產品。

請點擊「添加到購物車」按鈕，比你可以看到：

這是布產品，我們必須選擇「顏色」和「charactar」第一竟比點擊「添加到購物車」。如果我們先選擇「顏色」和「charactar」，那麼就不會有問題。但如果我們直接點擊添加到購物車比唯一的問題，文本框旁邊的「顏色」將拉伸和移動小上行空間。

如果我們只[CSS部分]

Answer 1

你需要做什麼，我要的是以下更改的styles.css

線NO：282

.validation-advice { clear:both; min-height:13px; margin:5px 0; padding-left:13px; padding-top:2px; line-height:13px; background:url(../images/validation_advice_bg.png) 0px 3px no-repeat; color:#e70808; float:left; width:70%; text-align:left} 

線NO： 1953年在註釋/ 維卡斯/

#product-options-wrapper dl dt { 
     display: inline-block; 
     margin-top: 13px; 
    } 

#product-options-wrapper dl dd { 
    display: inline-block; 
    vertical-align: top; 
    } 

#product-options-wrapper dl dd { width: 35%; } 

行號：1036

.product-options dd select { /*width:100%;*/ margin-bottom:5px; height:auto} 

讓我知道這對你的作品。

編碼快樂......

Answer 2

前直接點擊比也應該顯示爲像「添加到購物車」試試這個

.validation-advice{ /**add few property in this class**/ 
     position: absolute; 
     width: 100%; 
     bottom: -11px; 
    } 

    #product-options-wrapper dl dd{ /**add relative here **/ 
    position:relative; 
    } 

Answer 3

嘗試實施以下變化：

https://gyazo.com/c30af863033c32797f3f1435a37adef8位置：相對 - 父容器。 https://gyazo.com/1b5fd06e48cb8b0530f898ae8b968a35 - position：absolute;頂部：30PX;左：0像素;寬度：汽車; - 用於消息塊。

但要小心！如果您使用此解決方案，則應始終保持主塊下方的空間比消息的高度稍大。

此外，請加上top：0;以下塊： https://gyazo.com/01519f7a4e4d7325d3946e4c70c00122

應該「堅持」到窗口上部沒有空間： https://gyazo.com/13010dd395ca5bb18367daa670943fc6