Issue
I'm very new to using HTML and recently came across the details
and summary
tags. I tried styling the summary
, but using heading or <p>
shifted the text away from the arrow.
Specifically, I wanted to make the summary larger, so I used a <p>
inside the summary. However, this caused the arrow to show above the text - the following code can replicate this
<details>
<summary>
<p style="font-size:20px">Example</p>
</summary>
Inside text
</details>
Solution
p Tag is an block element thats what makes the arrow shift to a new line, in order to achieve your diserd result change the p tag to inline or use inline element instead such as span
<details>
<summary>
<p style="font-size:20px; display:inline">Example</p>
</summary>
Inside text
</details>
Answered By - mmh4all
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.