Two span tags are not displayed on the same line after being hidden_html/css_WEB-ITnose

I was making a tree diagram recently, handwritten by myself, and now I suddenly found a problem. I placed two span tags in one line, with a triangle symbol in front and text in the back. When these two tags are hidden and displayed again, the second one The span has a new line. I think it may be because it is parsed into two block-level elements when it appears again. Add float:left to both spans at the same time. Although there is no obvious line break, there is still a misalignment. How to break it? The following is a test Code:
CSS:

.triangle-close{    display: inline-block;  width: 0;   height: 0;  border-left: 8px solid; border-top: 4px solid transparent;  border-bottom: 4px solid transparent;}

HTML:

<div><ul>   <li class="level1">       <span class="triangle-close toggle" data-target="#level-con"></span>        <span class="theme">dddddd</span>   </li></ul><input class="btn" type="button" value="clickme" onclick="tt()"></div>

JS:

function tt(){  var t = $(".theme").css("display"); console.log(t); if(t == "none"){        $(".level1").children("span").css("display", "block");      $(".level1").children("span").css("float", "left"); }   else{       $(".level1").children("span").css("display", "none");   }   }

Summon all the great gods: @ Dielianhuayu @苏Xiao Meow @sysdzw @生活狠一鸡 @热情

Reply to the discussion (solution)

inline: Specify the object as an inline element.
block: Specify the object as a block element.

span is an inline element by default, and it must be set to an inline element when redisplayed

function tt(){  var t = $(".theme").css("display"); console.log(t); if(t == "none"){        $(".level1").children("span").css("display", "inline"); }   else{       $(".level1").children("span").css("display", "none");   }   }

inline: The specified object is an inline element.
block: Specify the object as a block element.

span is an inline element by default, and it must be set to an inline element when it is redisplayed

function tt(){  var t = $(".theme").css("display"); console.log(t); if(t == "none"){        $(".level1").children("span").css("display", "inline"); }   else{       $(".level1").children("span").css("display", "none");   }   }

I forgot about this, thank you!

The setting in your css is inline-block
You can also set it to inline-block when re-displaying
$(".level1").children("span").css ("display", "inline-block");

Or use hide() and show() to display and hide. This will automatically record the previous display state of the element