Question

请访问link

这是我们可以购买产品的电子商务网站。

请点击＆＃34;加入购物车＆＃34;按钮，你可以看到：

这是布料产品，我们必须选择＆＃34; color＆＃34;和＃34; charactar＆＃34; 首先我们必须点击＆＃34;添加到购物车＆＃34; 。如果我们选择＆＃34; color＆＃34;和＃34; charactar＆＃34;首先，比没有问题。但是如果我们直接点击添加到购物车而不仅仅是问题，那么＆＃34;颜色＆＃34;旁边的文本框将伸展和移动一点点上升。

我想要的是如果我们点击＆＃34;添加到购物车＆＃34;直接比它之前只显示[css part]

Answer 1

试试这个

  .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 2

您需要对styles.css进行以下更改

行号：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}

行号：1953，其中的评论为/ vikas /

  #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 3

尝试实施以下更改：

https://gyazo.com/c30af863033c32797f3f1435a37adef8 position：relative - 表示父容器。 https://gyazo.com/1b5fd06e48cb8b0530f898ae8b968a35 - 位置：绝对;顶部：30PX;左：0像素;宽度：汽车; - 用于消息块。

但要小心！如果使用此解决方案，则应始终保持主块下方的空间略大于消息的高度。

另外，请加上顶部：0;对于以下块： https://gyazo.com/01519f7a4e4d7325d3946e4c70c00122

它应该被卡住了＃39;到没有空格的窗口的上半部分： https://gyazo.com/13010dd395ca5bb18367daa670943fc6

一旦我们点击按钮，文本框就会伸展并向上移动

3 个答案: