当父 div 宽度固定时，如何使子 div 宽度自动化

Question

<ul class='navbar-nav '>
          <li  class='profile'>
            <ul class="dropdown-menu">
              <li class="profile-pet-block">
              <li class="profile-pet-block">
            </ul>
          </li>
        </ul>
    .navbar-nav {
      width: 115px;
      background-color: white;
      border-radius: 0px 5px 5px 0px;
      padding: 20px 0px;
    }
    li.profile {
      width: 100%;
      text-align: center;
      margin-bottom: 25px
    }
    .dropdown-menu {
      width: 234px;
      top: -23%;
      left: 114px;
      height: 88px;
      padding-left: 5px;
      position:absolute
    } 
    .profile-pet-block {
      float: left;
      padding: 10px 10px!important;
      width: auto!important;
    }

我希望 Ul.下拉菜单宽度是自动的，因为 ul 内的 li 数量是动态的。我该怎么做。下面是UI所附的屏幕截图

https://i.stack.imgur.com/ZfgcM.png

Answer 1

将

inline-block添加到ul.dropdown将占用其子项的width

* {
  margin: 0;
  padding: 0;
}
.parent > ul {
  list-style: none;
}
.parent {
  width: 115px;
  border: 2px solid red;
}
.parent > ul >li {
  border: 2px solid blue;
}
.parent ul li ul.dropdown {
  display: inline-block;
  border: 2px solid green;
}

<div class="parent">
  <ul>
    <li class="profile">
      <ul class="dropdown">
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ul>
    </li>
  </ul>
</div>