html - 独立元素宽度

Question

我正在尝试让 td 中每个 MyDropDown 的宽度依赖于子元素而不是父元素。

http://jsfiddle.net/qsuwg/13/

HTML

<td>
    <span class="MyDropDown" name="NormalMenu">This is a Normal Menu.</span>
    <ul class="MyDropDownList" name="NormalMenu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    <span class="MyDropDown" name="ShortMenu">Short Menu</span>
    <span class="MyDropDown" name="LongMenu">This is a very long menu. It is the longest one.</span>
</td> 

JS

var x = document.getElementsByClassName('MyDropDown');
for (i = 0; i < x.length; i++) {
    var s = x[i].innerHTML;
    x[i].innerHTML = '<table>\n<tr>\n<td>' + s + '</td>\n<td><div></div></td>\n</tr>\n</table>';
}

CSS

.MyDropDown {
    display:block;
    background-color: #333;
    color: #FFF;
    border-radius: 5px;
    white-space: nowrap;
}

.MyDropDown td:nth-child(1) {
    padding:5px 15px;
    border-right:1px solid #777777;
}
.MyDropDown td:nth-child(1):hover {
    color:#CCC;
}

.MyDropDown div:first-child {
    margin: 0px 5px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;    
    border-top: 4px solid #FFF;
}
.MyDropDown td:nth-child(2):hover > div:first-child {
    border-top-color:#CCC;
}

Answer 1

设置display: inline-block，这将解决这个问题。

.MyDropDown {
  display: inline-block;
  background-color: #333;
  color: #FFF;
  border-radius: 5px;
  white-space: nowrap;
}

DEMO