Question

查看#display内的白点？它们具有以下属性：

left: 10px;
font-size: 31px;
top: 0px;
position: relative;

那么为什么#display的顶部没有白点？更改字体大小没有帮助。每个跨度都没有填充边距，但它似乎有某种高度......

我想要达到的效果是那些白点在#display的顶部爆炸，因为这是我期望top: 0px做的......

Answer 1

您可以更改行高。

#display{
 line-height:0px;
}

Answer 2

我建议尝试这个，而不是使用像你那样设置你的跨度的字形

 display:inline-block;
 height:2px;
 width:2px;
 background-color:#FFFFFF;

现在你有一个块状元素定位它会更容易。

我也检查了你的JS，你会想要删除左边：0px和脚本中的字体大小调整，否则你会得到各种不同行的项目。

Answer 3

您也可以尝试旋转＆＃34;。＆＃34;性格，所以它会更接近顶部。

在你的javascript中：

$('#display').append("<span class='" + particleClass + " rotate'> . </span>");

在你的CSS中：

.rotate
{
  display: block;
  transform:rotate(180deg);
  -ms-transform:rotate(180deg); /* IE 9 */
  -webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */
}

您可能还需要调整宽度以使旋转正确显示。

有关详细信息，请参阅this link。

Answer 4

由于没有其他人愿意回答你的问题，我会去做。您的字体大小会导致您的点位置。这是一个标点符号，它一直是我读过的任何文本的底部。

你可以使用一个图像，你的元素正好在你想要的位置，但是字符不会漂浮到你的行的顶部，并且在任何书籍中都没有css技巧可以让他们这样做。

如果您正在制作动画时间轴，请考虑将它们绘制到画布元素上或为每个点添加svg元素。这样可以更好地处理尺寸和放置。

Answer 5

人们给出了一些很好的答案，并感谢您的解释，但我发现Ben Dyer的评论是最有帮助的。也就是说，使用代码创建一个项目符号点：＆＃39; •＆＃39;。

虽然这个项目符号字形包含空格，但它在其上方和下方包含相同数量的空白空间，这意味着它比一个完整停止更容易且位置更容易混淆，它的大部分空白空间位于其上方

将行高设置为0也有很大帮助。

是什么导致这些元素具有设定高度？

5 个答案: