Adam Adam - 2 months ago 8
CSS Question

Details in summary on one line?

I want my details inside footers appear in a row, now displayed each on a new line. How can I make it work with CSS?

<footer>
<P>Kontakta mig på följande sätt</P>
<details>
<summary>Mail</summary>
<p>Bla bla bla</p>
</details>

<details>
<summary>Telefon</summary>
<p>Bla bla bla</p>
</details>

<details>
<summary>Brev</summary>
<p>Bla bla bla</p>
</details>
</footer>

Answer

You can use display: inline; or display: inline-block; to make it happen that way.

footer details {
  display: inline;
}

Here is a fiddle: https://jsfiddle.net/y8tb5jnt/