How does details tag in html with a tag work

Question

How to align an <a> tag with the <details> tag in the same line. For example i want space with <details> in one row. But, if you do so the <details> is going to the next line.

Is there any solution?

<table>
  <tr>
    <td>
      <a>Some Text</a>
      <details>
        <summary></summary>
      </details>
    </td>
  </tr>
</table>

Please provide screenshots and actual examples. It's hard to tell what you're actually looking for but I'm guessing it's [this](https://stackoverflow.com/questions/4938716/align-div-elements-side-by-side) — Mohammed Mortaga, Sep 10 '19 at 07:55

mplungjan · Answer 1 · 2019-09-10T09:23:24.137

0

You mean this?

It makes the A behave a bit strange unless you also make it a block element

a, details { display:inline-block }
a { float:left; padding-right:3px; }

<table>
  <tr>
    <td>
      <a>Some Text</a>
      <details>
        <summary>Summary</summary>
        <p>Some details</p>
      </details>
    </td>
  </tr>
</table>

Since you are using a table, you can easily fix this

td { vertical-align:top }

<table>
  <tr>
    <td><a>Some Text</a></td>
    <td><details>
        <summary>Summary</summary>
        <p>Some details</p>
      </details>
    </td>
  </tr>
</table>

edited Sep 10 '19 at 09:23

answered Sep 10 '19 at 07:57

mplungjan

169,008
28
173
236

Thanks, that works, but on click on summary the complete text comes down. How that can be solved? – Raghavendra M.S Sep 10 '19 at 09:16
That worked !! I was wondering if i can add a link to the details tag, so on click on the arrow it should open a popup. Can i do that? – Raghavendra M.S Sep 10 '19 at 09:54
Sure. You likely want to find an example - easy to find at so. CSS or js – mplungjan Sep 10 '19 at 10:01
I added the onclick event for the
tag to open a popup and that worked .. Thanks!!..
– Raghavendra M.S Sep 10 '19 at 12:12

How does details tag in html with a tag work

1 Answers1