我想不通的快速 CSS 问题......我有点惊讶我不能。
我正在尝试创建一个由 4 个盒子组成的 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,你可以在这里找到它。
感谢您的任何指示。