鍍金池/ 問答/HTML/ “更多篩選”樣式錯位應(yīng)該怎么處理?

“更多篩選”樣式錯位應(yīng)該怎么處理?

clipboard.png
正常狀態(tài)

點(diǎn)擊更多篩選之后

clipboard.png

想要收起篩選跟 搜素 充值兩個按鈕始終在一行上 應(yīng)該給樣式做什么處理?
更多篩選按鈕的 樣式

 .cw-collapse {
    .header {
      position: relative;
      min-height: 36px;
    }
    .img-list {
      display: inline-block;
      width: 28px;
    }
    .show-more .arrow-text {
      position:absolute;
      top:200%;
      transform: translateY(40%);
      left:200px;
      z-index: 1;
      padding: 8px 30px;
      cursor: pointer;
      user-select: none;
      color: #016CDF;
    }
    
    .arrow-up:before {
      content: '';
      position: absolute;
      transform: rotate(-45deg);
      top: 50%;
      left: 13px;
      width: 6px;
      height: 6px;
      border-top: 1px solid #016CDF;
      border-right: 1px solid #016CDF;
    }
    .arrow-down:before {
      content: '';
      position: absolute;
      transform: translateY(-50%) rotate(135deg);
      top: 50%;
      left: 13px;
      width: 6px;
      height: 6px;
      border-top: 1px solid #016CDF;
      border-right: 1px solid #016CDF;
    }
  }
回答
編輯回答
夢一場

為什么樣式的問題,tag是vue呢?
其實(shí)在我看來vue只是表象(你項(xiàng)目里用到了vue),但是樣式的問題肯定還是跟CSS有關(guān),建議打開瀏覽器的開發(fā)者工具審查元素,調(diào)試一下。

P.S 我沒有用vue做過項(xiàng)目,但是我平時用REACT做項(xiàng)目的時候,樣式錯誤,也一定要審查元素。即便是使用的其他人的開源庫。

2017年11月3日 15:42
編輯回答
瘋浪

是不是點(diǎn)擊更多篩選之后,父元素高度變化,導(dǎo)致位置相對改變

你的更多篩選是定位元素嗎,設(shè)置bottom的值,不要設(shè)置top的值,讓他始終在父元素底部

2017年4月10日 22:52
編輯回答
熊出沒

用絕對定位試一下,position:absolute

2017年10月13日 23:32
編輯回答
故人嘆

繼續(xù)請教大家

2017年5月19日 04:17