css - 使 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:inlinewithUl和 display:inline-block 与licss 类。像这样的东西

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

JS 小提琴演示

Answer 2

只需添加即可删除无序列表的默认边距margin: 0。#top_navigation_list

更新了 JsFiddle