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并且将其设置为hidden。她拼命地逃跑，但我知道她在那里，某处盯着我看。这让我发疯了。

现在认真。我认为这不是正确的方法，我希望有人可以教我如何做到这一点。

This is my scenario on Fiddle

提前谢谢（主要是为了阅读这个废话）。

Answer 1

有几种方法可以实现您想要实现的目标。最常见的是，在列表中使用display: table，display: table-cell等并不是很高。

所以，我就是这样做的：http://jsfiddle.net/VKnQZ/1/

请记住，我不知道你正在尝试的所有情况，所以很可能我错过了一个（有效的）理由，你首先使用的是表格显示属性。

你会在这里注意到一些事情：

我已经废除了你的表格显示属性。我觉得你不需要它们，floats做得很好（只记得清除它们）。
我已从单元格div中删除了display。正如上面评论中指出的那样，div默认继承display: bloc k。其他尺寸按照您已有的尺寸设定尺寸。
我正在使用+ selector来放置元素之间的间距。在这种情况下，div + div基本上是“与另一个div相邻的每个div”的简称 - 所以除了第一个之外所有它们都是。

希望能达到你所瞄准的目标并消除所有令人讨厌的hacky溢出/边缘/等等。

以下是代码：

HTML（仅更改是删除行div）：

<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/
border-left version：http://jsfiddle.net/GCyrillus/2EZ3F/1/

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

部分是设定方向..或不是未设置＆amp;将方向重置为假浮动，
如果您不喜欢这种方法，请使用text-align 在CSSheet中，注意内联表而不是表，因此它对文本对齐和/或方向作出反应（并非所有页面都是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方法的行为类似于floated-child-div的方法。

在这个应用程序中，我想不出使用一个而不是另一个的理由。

一个小问题是某些旧版浏览器不支持inline-block。

否则，两种方法都使用相同的标记，CSS规则也同样简单。

选择可能很大程度上取决于您在#nav div元素中使用的内容。

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

CSS表格和间距

4 个答案: