0

这是第一次尝试：

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>
4

5 回答 5

2

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

更新了小提琴。

于 2013-05-14T16:23:57.433 回答
1

你可以加

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

到你的#holdCSS：

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

于 2013-05-14T16:24:28.993 回答
1

我认为您所追求的可以通过将以下内容添加到您的 div 的 css 中来完成。

display: inline-block;

所以你最终得到

#hold{
  background: #ff0000;
  width: auto;
  display: inline-block;
}
于 2013-05-14T16:23:43.920 回答
1

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

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

于 2013-05-14T16:23:56.993 回答
-1

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

<ul>
<li class='item'>men1</li>
<li class='item'>men2</li>
<li class='item'>men3</li>
</ul>
于 2013-05-14T16:25:34.823 回答