gpt4 book ai didi

html - 如何确保 div 之间永远没有空格?

转载 作者:行者123 更新时间:2023-11-28 17:34:36 25 4
gpt4 key购买 nike

我有一个非常独特的问题,只有当字体大小低于某个水平时才会出现。这是我正在使用的代码,它举例说明了我要实现的目标:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 18px;
height: 18px;
background-color: black;
border: 1px solid blue;

clear: both;
display: inline-block;
vertical-align: top;
color: red;
text-align: center;

font-size: 10px;

line-height: 18px;
}
</style>
<head>
<body>
<div>#</div><div>@</div><div>A</div><div>B</div><div>I</div><div>#</div><div>#</div><br><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>
</html>

这产生了我想要的结果 - 并排的 div,每个里面有一个字符。但是,如果我尝试将其缩小到 12x12 的 div 大小,则每行之间会出现一个我无法承受的间隙。我可以应用哪些技巧来获得所需的输出?

这就是我所说的“缩小规模”的意思:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 12px; /* change made here */
height: 12px; /* change made here */
background-color: black;
border: 1px solid blue;

clear: both;
display: inline-block;
vertical-align: top;
color: red;
text-align: center;

font-size: 10px;

line-height: 12px; /* change made here */
}
</style>
<head>
<body>
<div>#</div><div>@</div><div>A</div><div>B</div><div>I</div><div>#</div><div>#</div><br><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>
</html>

最佳答案

我想出了以下有效的方法:

http://jsfiddle.net/gfbxrgum/

  1. 将行包装在一个会中断的元素中。我刚刚创建了一个将清除两者的 block 级跨度。

  2. float div 并将清除设置为无。

CSS

div {
width: 12px; /* change made here */
height: 12px; /* change made here */
background-color: black;
border: 1px solid blue;

clear: none;
display: block;
float:left;
vertical-align: top;
color: red;
text-align: center;

font-size: 10px;
line-height: 12px; /* change made here */
}
span {
display:block;
clear:both;
}

HTML

<span><div>#</div><div>@</div><div>A</div><div>B</div><div>I</div><div>#</div><div>#</div></span><span><div></div><div></div><div></div><div></div><div></div><div></div><div></div></span>

关于html - 如何确保 div 之间永远没有空格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25319322/

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