css - div幅はその内容に合わせて自動調整します

Question

私は次のコードを持っています：http：//jsfiddle.net/domoindal/fkcQK/

必要なのは、境界線がメニューバーのコンテンツに収まるようにすることです。したがって、タグが3つある場合、そのようなdivの幅はその3つのタグの幅の合計に収まる必要があります。タグの周りの境界線に最大幅を付けたくありません。

後で、私が取得したいのは、ボックスではなく、結果として生じる不規則な形状の周りに影を作成することです。

好きなようにやる可能性はありますか？

ありがとう。

Answer 1

width: auto ビットを取り除き、display: inline-block をメニュー div:- に追加します。

http://jsfiddle.net/fkcQK/2/

Answer 2

フロートを使ってみる

http://jsfiddle.net/fkcQK/1/

Answer 3

はブロック要素であり、親の幅を自動的に埋めるwidth: auto;ため、プロパティは役に立ちません。ブラウザーの組み込みスタイルシートには、 CSS が何も変更しない<div>という定義があります。div { width: auto; display: block; }

あなたが望むことは、私が今見つけたこのjsFiddleで行われます：http://jsfiddle.net/loktar/seB5F/

位置座標を定義せずに親を作成position: absolute;するため、要素のボックスはそのコンテンツに適合します (入力する親がないため)。ただし、これによりドキュメントのフローから要素が削除されるため、マージンまたはパディングを割り当てる必要があります。その事実を隠すために近くの要素。

HTH。

<ul>ちょっとしたメモ: 将来的には、汎用の代わりにナビゲーション メニュー (概念的にはリスト) 要素を作成することを検討してください<div>。