Shrink wrapping on lists

by cent cent

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="expanded">
  <li class="branch">
    <span>
      <span class="icon"><i class="glyphicon glyphicon-minus"></i></span>
      <a href="#" class="btn btn-primary" role="button" aria-label="Properties">
        <span>Properties</span>
      </a>
    </span>
    <ul>
      <li class="branch">
        <span>
          <span class="icon"><i class="glyphicon glyphicon-minus"></i></span>
          <a href="#" class="btn btn-primary" role="button" aria-label="Js">
            <span>Js</span>
          </a>
        </span>
        <ul></ul>
      </li>
      <li class="branch">
        <span>
          <span class="icon"><i class="glyphicon glyphicon-minus"></i></span>
          <a href="#" class="btn btn-primary" role="button" aria-label="CSS">
            <span>CSS</span>
          </a>
        </span>
        <ul></ul>
      </li>
    </ul>
  </li>
</ul>

CSS

ul {
    font-size:    1.4rem;
    margin:       0;
    padding:      0;
    position:     relative;
    list-style:   none;
}
/* branch margin */
li > ul {
    margin-left:   0.5em;
}
li {
    margin:       0px;
    padding:      0 0 0 1.2em;   
    line-height:  2em;
    position:     relative
}
/* node icon handler */
li.branch span.icon {
   cursor:        pointer;
   width:         1.2em;
}
/* handle colisions from bootstrap code */
 a {
   font-size:    100%;
}
 /*
 * Expanded
 */
li > span {
   display:       table;
   width:         100%;
}
.expanded li > span > * {
   display:       table-cell;
}