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

divのcssに以下を追加することで、あなたが求めていることを達成できると思います。

display: inline-block;

だからあなたはで終わる

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

いくつかの方法があります。1 つは、の表示#holdをインライン ブロックに変更することです。問題は、ブロックレベルの要素がデフォルトで含まれているブロックの幅にまたがることです。これは、たまたま最初の含まれているブロックです。

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

于 2013-05-14T16:23:56.993 に答える