使div的高度與其內容相同

Question

我想用下面的代碼製作一個導航欄，但我似乎無法得到外部div與無序列表中的高度相同。

我試過display：inline-block，但它似乎不起作用。

下面是HTML，

http://jsfiddle.net/jairajdesai/7Lyss/

HTML：

<div id="top_navigation_menu"> 
    <ul id="top_navigation_list"> 
     <li class="top_navigation_options">Home</li> 
     <li class="top_navigation_options">Places</li> 
     <li class="top_navigation_options">Travel</li> 
     <li class="top_navigation_options">Stay</li> 
     <li class="top_navigation_options">FAQs</li> 
    </ul> 
</div> 

CSS：

#top_navigation_menu{ 
position:absolute; 
top:14%; 
min-width: 50%; 
background-color:#eee; 
color:white; 
} 
#top_navigation_list{ 
list-style-type: none; 
} 
.top_navigation_options{ 
display:inline; 
} 

Answer 1

使用display:inline與Ul並顯示：inline-block的與li CSS類。這樣

#top_navigation_list{ 
list-style-type: none; 
background-color:#000; 
display:inline; 
} 
.top_navigation_options{ 
    display:inline-block; 
} 

JS Fiddle Demo

Answer 2

東西#top_navigation_list只需添加margin: 0去除無序列表的默認保證金。

Updated JsFiddle