0

我想不通的快速 CSS 问题......我有点惊讶我不能。

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

2x2 网格

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

这是我的代码：

<!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，你可以在这里找到它。

感谢您的任何指示。

4

1 回答 1

3

内联元素对空白很敏感。去掉它：

<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 示例

或者通过使用 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 示例

或者通过浮动内部 div：

#dash-container div {
    float:left;
}

jsFiddle 示例

于 2013-10-15T18:40:07.563 回答