ナビゲーションバー - 各ボタンは別々の行にありますが、どうすれば修正できますか？

デモ：http://glados.cc/eJdemo/ナビゲーションバー - 各ボタンは別々の行にありますが、どうすれば修正できますか？

マイコード：

<style type="text/css"> 
#home 
{ 
display: block; 
width: 40px; 
height: 38px; 
background: url("bar1.png") no-repeat 0 0; 
} 
#home:hover 
{ 
background-position: 0 -38px; 
} 
#myplaces 
{ 
display: block; 
width: 123px; 
height: 38px; 
background: url("bar2.png") no-repeat 0 0; 
} 
#myplaces:hover 
{ 
background-position: 0 -38px; 
} 
</style> 
</head> 
<body> 
<a id="home" href="#" title="Home"></a> 
<a id="myplaces" href="#" title="My Places"></a> 
</body>

私はちょうど同じライン上にそれらをスカッシュする方法を見つけ出すことができませんでした。私はCSSに新しく、グーグルは私に答えを得られなかった。助けてくれてありがとう！

出典

2011-07-05 apscience

リンクをフロートさせる必要があります。
リンク 'cssの両方に' float：left 'を追加します。

出典

2011-07-05 12:59:43 Jrod

シンプル：display:blockは、それらを別々の行にします。代わりにdisplay:inlineを試してください。

出典

2011-07-05 12:58:41 SteeveDroz

リンクがデフォルトのインライン要素であるため、そのCSSの表示プロパティを完全に削除してください –

ああ、もちろん '：-P' hehe ... – SteeveDroz

背景、固定高さなどは動作しません（少なくとも上記のコードで現在実装されているので）、単にインラインに変更するだけです。インラインブロックに移動することを示唆する私の答えを参照してください。 – ADW

あなたはそれらをフロートするか（JRODによって答えを参照）、または別の選択肢から変更することです：あなたはinline-blockにdisplayを設定し、margin:0px;すべき

display: inline-block;

出典

2011-07-05 13:00:50 ADW

'inline-block'のボタンの間にはギャップがあります。これは、HTML内のリンク間の空白を削除することによって（たとえば）修正することができます。しかし、 'float：left'を使う方が簡単です。 – thirtydot

@thirtydot：私は両方のアプローチの長所と短所があると思います。確かにフロート：左は非常に良い解決策です、私はこの理由のために自分自身の答えを自分自身upvoted。 – ADW

：に

display: block;

。 display:inlineは機能しません。そして、同じ行に<a>タグを配置する必要があります。

出典

2011-07-05 13:02:22 kongr45gpen

ナビゲーションバー - 各ボタンは別々の行にありますが、どうすれば修正できますか？

答えて

関連する問題