獨立元素Witdths

Question

我想獲得每個MyDropDown在td的寬度取決於孩子而不是父母。

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