Question

我无法弄清楚的快速CSS问题......我有点惊讶，我不能。

我正在尝试创建一个4个盒子的2X2网格，它们彼此接触，中间没有边距;看图像：

2x2 grid

然而，当我实现下面的代码时，我在中间得到一条垂直线，我无法摆脱它。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style>
#dash-container {
    width: 209px;
}
.dash-object {
    display: inline-block;
    height: 100px;
    text-align: center;
    vertical-align: middle;
    width: 100px;
}
#dash-edit{background:#FF7700;}
#dash-conference{background: #55bbff;}
#dash-upgrade{background: #333333;}
#dash-logo{background: #ffff00;}
</style>
</head>
<div id="dash-container">
<div id="dash-logo" class="dash-object"><span>Logo</span></div>
<div id="dash-conference" class="dash-object">Conference</div>
<div id="dash-edit" class="dash-object">Edit</div>
<div id="dash-upgrade" class="dash-object">Upgrade</div>
</div>
</html>

如果您想使用html，可以find it here。

感谢您的任何指示。

Answer 1

内联元素对空白区域敏感。删除它：

<div id="dash-container">
    <div id="dash-logo" class="dash-object"><span>Logo</span></div><div id="dash-conference" class="dash-object">Conference</div>
    <div id="dash-edit" class="dash-object">Edit</div><div id="dash-upgrade" class="dash-object">Upgrade</div>
</div>

<强> jsFiddle example

或者使用HTML评论标记：

<div id="dash-container">
    <div id="dash-logo" class="dash-object"><span>Logo</span>
    </div><!--
    --><div id="dash-conference" class="dash-object">Conference</div>
    <div id="dash-edit" class="dash-object">Edit</div><!--
    --><div id="dash-upgrade" class="dash-object">Upgrade</div>
</div>

<强> jsFiddle example

或者通过浮动内部div：

#dash-container div {
    float:left;
}

<强> jsFiddle example

框网格中不需要的边距

1 个答案: