两个span标签隐藏后再显示不在同一行

[DaveLeeCN]

最近在做树图，自己手写的，现在突然发现个问题，我在一行放置了两个span标签，前面是三角符号，后面是文字，这两个标签隐藏之后再次显示时第二个span换行了，我想可能是因为再次出现的时候被解析成了两个块级元素，在两个span中同时添加float:left，虽然没有明显换行，但是还是有错位，怎么破，以下是测试代码：
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");
	}
	
}

召唤一下各位大神：@蝶恋花雨 @苏小喵 @sysdzw @人生难得一只鸡 @豪情

[天际的海浪]

inline： 指定对象为内联元素。 block： 指定对象为块元素。 span默认是内联元素，重新显示时也要设置为内联元素

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");
	}
	
}

[天际的海浪]

你css中设置的是inline-block 重新显示时也可以设置为inline-block $(".level1").children("span").css("display", "inline-block"); 或者用hide()和show()显示隐藏，这个会自动记录元素之前的显示状态

[DaveLeeCN]

引用 1 楼 jslang 的回复:

inline： 指定对象为内联元素。 block： 指定对象为块元素。 span默认是内联元素，重新显示时也要设置为内联元素

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");
	}
	
}

忘记这回事儿了，多谢！