CSS表和間距

Question

我是新來的CSS表，這是我第一次。所以我發現當你將display:table設置爲div時，你可能會忘記所有margin和padding（以及其他），因爲它們將被忽略。尼斯。我發現完成這項工作的唯一財產是border-spacing，但與margin和padding相比有點受限。它只有兩種造型方式，水平和垂直。你不能像border-spacing-left或border-spacing: 0 1px 2px 3px那樣設置你想要的邊的值。

就我而言，我有一張桌子，屏幕右上角有一行。我希望它附在最上面並且水平間隔，這給我帶來了問題。頂部是好的，但是當我使用border-spacing: 10px 0時，右邊從邊界分離。

像我這樣的聰明人並不認爲這是一個問題，因爲我們可以將它設置爲margin-right否定性的，使它再次附加在瀏覽器的右側。哇，我很自作聰明！

但是，我看到屏幕底部有一個小小的滾動條，就像廚房裏廚房裏的蟑螂。我討厭roac ..滾動條特別橫向，所以我得到了我的殺手overflow-x和kil ..把它設爲hidden。她拼命奔跑並消失，但我知道她在那裏，在某個地方盯着我。這讓我瘋狂。

認真地現在。我認爲這不是正確的做法，我希望有人能教我如何做到這一點。

This is my scenario on Fiddle

預先感謝您（主要爲閱讀本廢話）。

Answer 1

有幾種方法可以實現您嘗試實現的目標。最常見的是，使用display: table,display: table-cell等在名單上不是很高。

所以，這裏是我會怎麼做：http://jsfiddle.net/VKnQZ/1/

千萬牢記，我不知道你在嘗試什麼的全部情況，因此很可能是我失蹤（有效）原因是您首先使用表格顯示屬性。

您會在這裏發現的幾件事情：

• 我免掉你的表的顯示性能。我不認爲你需要他們，floats做得很好（只要記住要清除它們）。
• 我已將您的display從手機div中刪除。正如上面評論中的人指出的，div默認繼承display: bloc。其他尺寸按照您的尺寸設置尺寸。
• 我正在使用+ selector來放置元素之間的間距。在這種情況下，div + div對於'除了另一個div之外的每個div都基本上是短暫的 - 因此除了第一個以外，所有這些都是。

希望能夠實現您的目標，並消除所有令人討厭的hacky overflow/margin/etc。

下面的代碼：

HTML（唯一的變化是去掉行格）：

<div id="nav"> 
    <div class="red"></div> 
    <div class="green"></div> 
    <div class="blue"></div> 
</div> 

CSS：

body { 
    padding: 0; 
    margin: 0; 
} 

#nav { 
    float: right; 
} 

#nav div { 
    float: left; 
    width: 120px; 
    height: 40px; 
} 

#nav div + div{ 
    margin-left: 10px; 
} 

.red { background-color:#f00 } 
.green { background-color:#0f0 } 
.blue { background-color:#00f } 

Answer 2

，你能告訴我爲什麼當你有「table」標籤時，你是否試圖模仿表格行爲？它可以被風格很好也

你在做什麼，有時被稱爲「divitis」

edit: 

您可以定位表絕對http://jsfiddle.net/n83kT/

Answer 3

不太清楚，如果這個正確的地方，討論浮子和顯示:)
但是，flex正在他的路上，並且顯示器已經安靜高效。

顯示+方向，你可以踢漂浮。
邊框間距版本：http://jsfiddle.net/GCyrillus/2EZ3F/
左邊框的版本：http://jsfiddle.net/GCyrillus/2EZ3F/1/

<section> 
    <div id="nav"> 
     <div class="red"></div> 
     <div class="green"></div> 
     <div class="blue"></div> 
    </div> 
</section> 

部分是設置方向..或不
取消設置&復位方向假浮動，
其他文本的使用如果你不喜歡這種方法，請對齊。
在CSSheet，通知內聯表，而不是表，因此反應的text-align和或方向（不是所有的頁面都是EN或FR :)）

body { 
    padding: 0; 
    margin: 0; 
} 
section { 
    direction:rtl; /* unset regular if you wish, else text-align will do for inline-boxes */ 
} 
#nav { 
    direction:ltr;/* reset/set here if you want cells from left to right */ 
    display:inline-table; 
    border-spacing: 10px 0 ; 
} 
#nav div { 
    /*direction:ltr; reset here if you want cells from right to left */ 
    display: table-cell; 
    width: 120px; 
    height: 40px; 
} 
#nav div + div { 
    margin-left: 10px; 
} 
.red { 
    background-color:#f00 
} 
.green { 
    background-color:#0f0 
} 
.blue { 
    background-color:#00f 
} 

我2（晚）美分不同觀點:)

Answer 4

爲了完整性，我想爲經常被忽視的inline-block顯示器類型提供案例。

的使用花車的相似，HTML如下：

<div id="nav"> 
    <div class="red"></div> 
    <div class="green"></div> 
    <div class="blue"></div> 
</div> 

和CSS：

#nav { 
    position:absolute; 
    top:0; 
    right:0; 
} 

#nav div { 
    width: 120px; 
    height: 40px; 
    display: inline-block; 
    vertical-align: bottom; 
} 

#nav div + div { 
    margin-left: 10px; 
} 

這inline-block方法的行爲類似於浮動，兒童div的做法。

在這個應用程序中，我想不出有什麼理由使用它。

一個小問題是inline-block在一些較舊的瀏覽器中不受支持。

否則，兩種方法都使用相同的標記並且CSS規則同樣很簡單。

選擇可能取決於您在#nav div元素中使用的內容。

演示小提琴：http://jsfiddle.net/audetwebdesign/EVJPN/