文本框被拉伸和移动上攻一旦我们点击按钮

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