当父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.dropdown菜单宽度为自动，因为ul里面的li数是动态的。我怎么能这样做。以下是ui的附件截图

http://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>