Не можете выровнять svg и <p>на одной строке с дисплеем: inline-block?

Question

Хорошо, я уверен, что это простое решение, но я не могу настроить его здесь. Я сгенерировал 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>

Это создает это, где svg предотвращает нахождение <p> в одной строке.

Я хочу, чтобы <p> и svg были в одной строке, с h2 ниже:

Css:

#innerCal {
        position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
            overflow-y: scroll;
            text-align: center;
    }
#calCell {
    //display: inline-block;
    width: 150px;
}

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

#calCell > svg {
display: inline-block;
}

#calCell > h2 {
    display: block;
    text-transform: uppercase;
}

Их будет много, и мне нужно, чтобы они все сидели рядом друг с другом в виде календаря. Что здесь не так?

Answer 1

div#calCell определяется с жестко заданной шириной 150px, тогда как SVG не имеет атрибута width, но содержимое его окна просмотра превышает 150px.

, определяющее явный атрибут width для SVG - так что ширина SVG плюс две скобки не превышает 150px - решает проблему.

Демонстрация в фрагменте ниже.

Рекомендации:

• Исправьте отступ кода
• Не используйте <p> для встроенных элементов
• Избегайте использования position:absolute
• Всегда устанавливайте явные width и height атрибуты SVG

#innerCal {
        position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
            overflow-y: scroll;
            text-align: center;
    }
#calCell {
    width: 150px;
}

#calCell > svg {
display: inline-block;
}

#calCell > h2 {
    text-transform: uppercase;
}

<div id = "innerCal">

	<div id = "calCell">
		<span>[</span>
		<svg width="110px" 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="Img7" 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:black;" xlink:href="#Img7"/>
		</svg>

		<span>]</span>
		<h2>01-02-2020 10:00AM</h2>
	</div>
</div>

Answer 2

Попробуйте использовать position: absolute на вашем <p>

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