我想不通的快速 CSS 问题……我有点惊讶我不会。
我正在尝试创建一个 2X2 的网格，其中包含 4 个相互接触且中间没有边距的框；看图:
但是，当我执行下面的代码时，中间有一条垂直线，我无法摆脱它。
这是我的代码:
<!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 .
感谢您的指点。
最佳答案
行内元素对空格敏感。删除它:
<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 注释标签:
<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>
或者通过 float 内部 div:
#dash-container div {
float:left;
}
关于html - 框网格中不需要的边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19388630/