html - 一个可变宽度的 div 来保存段落元素？

Question

这是第一次尝试:

http://jsfiddle.net/nQaQb/6

<div id = 'hold'>
    <p class='item'>men1</p>
    <p class='item'>men2</p>
    <p class='item'>men3</p>
</div>

#hold{
  background: #ff0000;
  width: auto;
}
.item{
    display:inline;
    margin-left: 20px;
}

但是宽度覆盖了整个窗口。

我怎样才能根据持有的 div 中有多少 p 标签来扩展和收缩宽度。

我希望 div 宽度随内部内容而变化。

生产代码:

/***************************************************************************************************
**media control
**
*/


#mi_control{
  position:  absolute;
  top:  660px;
  display: inline;
  border: 1px dotted #aaaaaa;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 400px;
  border-radius: 5px;
}

.menu_bottom{
  font-family:  "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
  font-size:  12px;
  color:  #000000;
  margin-left:    20px;
  margin-left:    20px;
  display: inline;
}

.menu_bottom:hover{
    cursor: pointer
}

<!--media_control
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --->


<div id="mi_control">
  <p id="mi_cover_l" class="menu_bottom">Foo &copy; 2013</p>
  <p id="mi_about_l" class="menu_bottom">How</p>
  <p id="mi_privacy_l" class="menu_bottom">Privacy</p>
  <p id="mi_team_l" class="menu_bottom">Team</p>
  <p id="mi_arc_l" class="menu_bottom">Source</p>
</div> 

Answer 1

您无需指定 width:auto，因为它是默认设置。而是将容器设置为 display:inline-block。

Updated fiddle .