如何在保留文本對齊的同時去除2個元素之間的空白區域？

我有一個菜單欄在屏幕上居中。在左邊，我有一個元素以及一個右邊的元素。這些背景圖像將菜單欄與圖形佈局的其餘部分相關聯。如何在保留文本對齊的同時去除2個元素之間的空白區域？

的問題是，有標記之間的空格。這裏是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（寬x高）。

我不能浮動它們，因爲菜單將不會中心。我不能在父容器上使用

font-size: 0px;

，因爲它不會顯示菜單項，並設置菜單項來

font-size: 1em;

事後不能解決問題。

任何人有一個解決方案，將在所有的瀏覽器和不依賴於JS？

注：這兩個元素的邊框僅用於佈局的目的，並不會在最後的代碼。

來源

2012-03-04 Matteo

你能解釋一下標籤是什麼嗎？「標籤之間有空格」 – 2012-03-04 05:56:40

您能否顯示相關標記？ – nnnnnn 2012-03-04 05:57:00

菜單中的項目究竟是如何生成的？在包含菜單的div中，您是否使用了無序列表？

如果你是一個然後可能的解決方案是將左，右圖像添加到：第一，兒童和：使用CSS列表的最後子元素。您將不再需要兩個額外的div元素，因此可以專注於單個菜單容器。

來源

2012-03-04 06:04:54

有四種方式，我知道&，您可以使用刪除whit space。

1）如你所說給font-size:0;你的父母DIV &定義font-size:15px;你的孩子的divs。

2）你必須寫你的標記在single line這樣的：

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

取而代之的是

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

3）不就是很好的解決方案，但一段時間有效。在div中給予margin-letf：-5px。就像這樣：

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

4）最後，你可以使用float代替inline-block;

來源

2012-03-04 06:04:55 sandeep

設置背景顏色來檢查您div寬度和高度，你可以使用margin-left:與負值站在你div完美。

來源

2012-03-04 10:15:20 liza5757

如何在保留文本對齊的同時去除2個元素之間的空白區域？

回答

相關問題