2010-09-29 79 views
11

我有幾個div s,這使得頁腳和主體之間的空間太小了。所以我想將一個div轉換爲span。但是當我這樣做的時候,它會混淆了頁腳的內容。將div轉換爲CSS的範圍

我如何做到這一點,並保持已經爲頁腳定義的樣式?

在此先感謝!

編輯

div.footer { 
width: 986px; 
margin: 0 auto; 
padding-bottom:18px; 
border: 0; 
text-align: left; 
color:#000000; 
} 
+0

你可以發佈一些HTML和CSS,所以我們可以幫助你更多?或者一個現場的例子會很棒。 – Kyle 2010-09-29 09:16:24

+2

呃......你確實將'div'元素轉換成'span'元素能夠解決你的問題嗎?這不是平息CSS定位怪癖的常用方法之一 – 2010-09-29 09:26:26

+0

是的,因爲在eachother旁邊有2個div,這會在body和footer之間產生休閒間隙。隨着跨度這個差距可以減少。凱爾Sevenoaks,這是一個很大的,沒有活的例子atm。 – Yustme 2010-09-29 09:28:07

回答

17

在div(多個)marginpadding正如您所知道的,<div><span>之間的差異只是一個默認爲display:block;而另一個則爲display:inline;。要使其中一個行爲,只需將顯示樣式設置爲其他類型即可。

但是,你已經說過你試過這個,它沒有達到你要找的效果。還有另一種顯示性能,這是少爲人知,但提供了兩者之間的中途宿舍:

display:inline-block; 

它所做的是內聯顯示它,但仍與塊狀性質。 (這基本上是<img>默認標籤的工作原理)。

難道這就是你要找的答案嗎?

+0

謝謝你爲我做的! – Yustme 2010-09-30 09:17:25

0

嘗試增加overflow:auto;你的跨度。另外補充display:block;

+0

這與op所問的內容相反。 – Kyle 2010-09-29 09:20:17

+0

不,它不是,SPAN元素大多數時候需要一些額外的屬性來開始表現爲塊對象,而不是在基礎DIV上「落下」。 – Ben 2010-09-29 09:21:24

+5

「所以我想將一個div轉換爲跨度。」您發佈瞭如何將跨度轉換爲div :) – Kyle 2010-09-29 09:26:20

3

一個DIV轉換爲一個跨度,只需添加:

.myDiv 
{ 
    display: inline; 
} 

但我真的不知道這是你後的溶液。

+0

我試過了,但它沒有奏效。它沒有采取所有其他風格。它只是對齊左邊。 – Yustme 2010-09-29 09:39:02

+0

因爲它現在是一個內聯元素,就像我們所說的那樣,將一個div轉換爲跨度並不是正確的解決方案:) – Kyle 2010-09-29 09:42:31

-1

如何,如果添加此:

position:relative /*optional*/ 
float:left; 
left:0px; 

我總是這樣做之前,我知道要使用量程當我第一次學習的CSS,我總是做我的元素含量。

0

如果頁腳和身體之間的空間太大,是否看過受影響的div上的邊距和填充物?是否有某種高度或最小高度使得內容中的某些內容比內容的自然結束更高? Firebug是一個很好的工具。

Div是一個塊元素。其他塊元素是段落,標題,列表等。跨度是內聯元素。其他內聯元素是強壯的,圖片,錨點等。 您仍然需要將主體包含在塊級元素中。

1

引用:

旁邊還有2周的div海誓山盟其產生所述主體和所述footerbody和頁腳之間的休間隙

解決方案:

  • 刪除空div(s)從HTML
  • 通過添加display:none
  • 刪除空div(一個或多個)降低的div(一個或多個)的height
  • 減少
  • 設置position:relative; top:-[yourownnumber]px.footer
+0

謝謝,這對我也有幫助! – Yustme 2010-09-30 09:18:33

+0

不客氣。 – 2010-09-30 09:34:11