Javascript 无法对齐svg和<；p>；与显示在同一行上：内联块？

好的，我相信这是一个简单的解决方案，但我不能让它在这里对齐。我生成的HTML如下所示：

<div id = "innerCal">
<div id = "calCell"><p>[</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 443"><defs><filter x="-50%" y="-50%" width="200%" height="200%" id="Blur7"><feGaussianBlur stdDeviation="25" /></filter><g id="" data-name="Layer 1"><rect class="cls-1" width="900" height="758"/></g><g id="Img7"><path class="cls-1" d="M227.42,144.69v89.77c0,4.07,6.32,4.08,6.32,0V144.69C233.74,140.62,227.42,140.62,227.42,144.69Z"/><path class="cls-1" d="M221.19,146.76q2.69-3.33,5.6-6.47c.93-1,1.87-2,2.83-3l1.52-1.52.93,1.46,2.44,3.81,4.87,7.63a3.16,3.16,0,0,0,5.46-3.2l-5.6-8.76-2.92-4.58c-1.1-1.71-2.36-3.37-4.62-3.37-3.53,0-6.14,3.58-8.35,5.92s-4.52,5-6.64,7.56a3.28,3.28,0,0,0,0,4.48C217.83,147.87,220.1,148.09,221.19,146.76Z"/><path class="cls-1" d="M286.33,281.85c-.22-1.64-.35-3.28-.44-4.92v0l0-7.44a3.19,3.19,0,0,0-3.16-3.16,3.24,3.24,0,0,0-3.17,3.16,68.82,68.82,0,0,0,0,7.6q-10.76-7.95-21.45-16-6.1-4.57-12.25-9.12c-4.33-3.2-8.62-6.81-13.51-9.13a20,20,0,0,0-14.28-1.44c-5.47,1.48-10.79,3.85-16.1,5.82l-33.34,12.35-31.93,11.83L141,259.77a3.19,3.19,0,0,0-2.21-3.89c-1.83-.5-3.23.63-3.89,2.21q-2.76,6.57-5.53,13.13a2.39,2.39,0,0,0,0,1.8,18.53,18.53,0,0,0-.83,2.41A3.61,3.61,0,0,0,129,279a5.89,5.89,0,0,0,3.25,2.42c1.61.61,3.23,1.2,4.84,1.8l9.68,3.59a3.18,3.18,0,0,0,3.89-2.2,3.24,3.24,0,0,0-2.21-3.9l-8.06-3-1.29-.48,57.74-21.39,16.67-6.17c4.79-1.78,9.38-3.77,14.46-1.9,4.71,1.73,8.79,5.25,12.78,8.19s8.12,6,12.16,9q11.91,8.91,23.84,17.76l-5.91,2.16a3.16,3.16,0,0,0,1.68,6.1l6.82-2.49c2.52-.91,5.35-1.65,6.28-4.5,0-.07,0-.14.05-.21A2.42,2.42,0,0,0,286.33,281.85Z"/></g></defs><use style="fill:pink;" filter="url(#Blur7)" xlink:href="#Img7"transform="translate(0,0)"/><use style="fill:white;" xlink:href="#Img7"/></svg>
<p>]</p><h2>01-02-2020 10:00AM</h2></div></div>

---

将有许多这些生成，我需要他们都坐在一起，像一个日历线彼此。这里出了什么问题？

试着在

上使用
位置：绝对

#calCell > p {
    display: inline-block;
    position: absolute;
}

div#calCell
定义为硬编码宽度
150px
，而SVG没有
width
属性，但其viewbox的内容超过150px

为SVG定义一个显式的
width
属性，这样SVG加上两个括号的宽度就不会超过150px，从而解决了这个问题

在下面的代码片段中演示

建议：


修复代码的缩进
不要对内联元素使用

避免使用
position:absolute
始终为SVG设置显式
宽度
和
高度
属性


#内部校准{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：-17px；/*增加/减少此值以实现跨浏览器兼容性*/
溢出y：滚动；
文本对齐：居中；
}
#卡塞尔{
宽度：150px；
}
#calCell>svg{
显示：内联块；
}
#calCell>h2{
文本转换：大写；
}

[
]
01-02-2020上午10:00
“这里怎么了？”-除了对单个字符使用段落元素外，您的意思是？这应该是spans或其他一些东西。“将生成许多这样的代码”-如果你指的是你显示的完整HTML块-那么你可能首先应该重写它以使用类而不是ID，这样你就不会到处创建重复的ID。Idk没有这样做-很好的答案！
#calCell > p {
    display: inline-block;
    position: absolute;
}