どのようにテキストの配置を維持しながら2つの要素間の空白を削除できますか？

Question

メニューバーが画面の中央に表示されています。左には要素があり、右にも要素があります。これらはメニューバーをグラフィックレイアウトの残りの部分に結びつける背景イメージを持っています。

問題は、タグの間に空白があることです。ここにCSSがあります：

#menu_items { 
display: inline-block; 
position: relative; 
margin: 0; 
padding: 6px; 
top: -9px; 
height: 15px; 
background-color: #75784D; 
} 

#swoop_left { 
position: relative; 
display: inline-block; 
margin: 0; 
padding: 0; 
background-image: url('../imgs/menu_l.gif'); 
background-repeat: no-repeat; 
width: 140px; 
height: 21px; 
font-size: 0px; 
border: solid red 1px; 
} 

#swoop_right { 
position: relative; 
display: inline-block; 
margin: 0; 
padding: 0; 
background-image: url('../imgs/menu_r.gif'); 
background-repeat: no-repeat; 
width: 140px; 
height: 21px; 
border: solid red 1px; 
} 

画像自体は140px x 21px（w x h）です。

メニューが中央に表示されないため、フロートできません。それは、メニュー項目を表示しません、と

font-size: 1em; 

にメニュー項目を設定すると後で問題が解決しないので、私は親コンテナに

font-size: 0px; 

を使用することはできません。

誰もがすべてのブラウザで動作し、JSに頼っていない解決策を持っていますか？

注：2つの要素の境界線はレイアウト目的のみのため、最終コードには含まれません。

Answer 1

メニューのアイテムはどのように正確に生成されていますか？メニューを含むdivには、順不同リストを使用していますか？

もしそうなら、左と右の画像をcssを使ってリストの：first-childと：last-childに追加することができます。 2つの余分なdiv要素が不要になるため、単一のメニューコンテナに集中できます。

Answer 2

whit spaceを削除するために使用できる&を知っている4つの方法があります。

1）あなたの親DIV &にfont-size:0;と言ったように、あなたの子divにfont-size:15px;を定義してください。

2）あなたはこのようsingle lineであなたのマークを記述する必要があります：代わりにこの

<div class="parent"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</div> 

3の

<div class="parent"> 
    <div>1</div><div>2</div><div>3</div> 
<div> 

）良い解決策が、いくつかの時間が有効ではないことを。 margin-letfを：divに-5px与えます。このように：

div + div{margin-left:-5px} 

4）最後に、あなたのdiv幅と高さを確認するために、あなたは完全にあなたのdivに立つために、負の値でmargin-left:を使用することができます代わりにinline-block;

Answer 3

セットの背景色のfloatを使用することができます。