jeudi 26 janvier 2023

How can I make a checkbox and a 'details' item tree stary on the same line? HTML

I have a checkbox that will convert to strike-through the text after checked, but I need the text to be an item tree, so far I have accomplished those 2 things, but for the life of me I can't make them to show on the same line and keep the same behavior.

Basically I want it to be like this:

☐ ▶Title of line

But so far it looks like this:

☐‎

▶Title of line

this is what the code looks like:

<!DOCTYPE html>

<html>
<head> 


  <style id="compiled-css" type="text/css">
input[type=checkbox]:checked + label.strikethrough {
   text-decoration:line-through;
}
</style> 
</head> 

 <body> 

  <div class="form-group "> 
   <div class="col-md-5"> 
    <div class="checkbox"> 
     <input type="checkbox" name="packersOff" value="1"> 
     <label class="strikethrough">


    <details>
      <summary>Title of line</summary>
      <ul>
        <li>lvl 1 - thing 1</li>
        <li>lvl 1 - thing 2
      </ul>
    </details>
  </li>

</body>
</html>

Please consider I am new to all this, don't assume I know anything hahaha

I tried using 'nowrap' and followed these articles, to not avail, I don't really know how to use it my situation

https://www.designcise.com/web/tutorial/how-to-force-html-elements-to-stay-on-the-same-line HTML- how to have checkbox and slider on the same line




Aucun commentaire:

Enregistrer un commentaire