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/