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