Question

这是第一次尝试：

<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

Answer 2

我认为你所追求的是通过将以下内容添加到你的div的css来实现的。

display: inline-block;

所以你最终得到了

#hold{
  background: #ff0000;
  width: auto;
  display: inline-block;
}

Answer 3

有几种方法，一种是将#hold的显示更改为内联块。问题是块级元素默认会跨越containing block的宽度，在您的情况下恰好是初始包含块。

http://jsfiddle.net/nQaQb/1/

Answer 4

你可以添加

   display:inline; /* or display:inline-block; */

到#hold css：

http://jsfiddle.net/nQaQb/3/

Answer 5

您好，您应该使用无序列表

<ul>
<li class='item'>men1</li>
<li class='item'>men2</li>
<li class='item'>men3</li>
</ul>

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

5 个答案: