gpt4 book ai didi

html - 框网格中不需要的边距

转载 作者:太空宇宙 更新时间:2023-11-03 23:53:11 24 4
gpt4 key购买 nike

我想不通的快速 CSS 问题……我有点惊讶我不会。

我正在尝试创建一个 2X2 的网格,其中包含 4 个相互接触且中间没有边距的框;看图:

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 .

感谢您的指点。

最佳答案

行内元素对空格敏感。删除它:

<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

或者通过 float 内部 div:

#dash-container div {
float:left;
}

jsFiddle example

关于html - 框网格中不需要的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19388630/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com