DIV要素の幅を広げるにはどうすればいいですか？私のコードはなぜ失敗するのですか？

Question

http://jsfiddle.net/antonpug/jfrNt/

すべてのボタンを同じサイズにしようとしていますが、幅を100に設定していますが、何もしません。ああ！だから...

Answer 1

modified a bit,

• 全体<li>

• を埋めるために<a>のdisplay:blockを作る（CSS3）box-sizing:border-boxを追加しました幅計算に境界を含める

• をdisplay:inlineと置き換え、float:leftと置き換えます。 display:inlineでスタイルされた要素は、寸法（幅と高さ）を持つことができず、上下のパディングと余白はテキストのベースラインから移動させません（垂直に移動しません）。左浮かべ要素は自動的にdisplay:block

• を持っているように見えるのIDだけ

Answer 2

あなたはmenu_itemのidをターゲットとしている#menu_item宣言で幅：150pxを設定しています。 1つは、id = "menu_item"属性を持つページに複数の要素を含めることはできません。

あなたがする必要があるのは、表示するdivs内のタグを設定することです：デフォルトではインライン要素のようにブロックし、その上に幅を指定することができます。あなたはパーセンテージを使用して<li>

で設定する必要があり

Answer 3

1. たら、同じIDを複数回使用しないでください表示されますので、クラスにIDを変更しました。
2. のインライン要素には、幅またはマージンを設定することはできません。

ここでは次のように変更してupdated jsFiddleです：.menu_itemクラスに変更

• 。
• .menu_itemはdisplay: inline-blockになりました。
• .menu_item aは今やdisplay: blockです。

トップの余白があるはずですが、必要に応じて削除することはできません。

Answer 4

これは、あなたが一定の幅をしたい場合は、JSFiddle

はクラスではないIDを使用するようにdivを変更する持っていた、

.menuitemは現在表示され動作します：ブロックとフロート：左;

.menuには、メニュー項目の折り返しを防ぐための最小幅があります。