絕對定位元素根據元素寬度自適應自身寬度

絕對定位元素根據元素寬度自適應自身寬度

 

最近在做這樣一個下拉框，

 

 

 如果只設置絕對定位，寬度寫100%的話，會遵循父級寬度的100%，但是文字實際上不夠寬度，那么如果想根據子元素的寬度自適應，實現下圖的效果，就需要加下面的樣式。

 

 

 

 

 

 

 

 

 

 

 

 

.mp3-info-status {
  position: relative;

  .success {
    color: #9CCC65;
  }
  .pending {
    color: #25a3ea;
  }
  .err {
    color: #f94954;
  }

  .down-menu {
    display: none;
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    background: #4c4d51;
    z-index: 1000;
    line-height: 19px;
    padding-bottom: 2px;
  }

  .link {
    text-decoration: underline;
  }

  &:hover {
    .down-menu {
      display: table;
    }
  }
}