hidden_​​html/css_WEB-ITnose にした後、2 つの Span タグが同じ行に表示されない

最近、自分で手書きで樹形図を作成していたのですが、1 行に 2 つのスパン タグを配置し、前に三角形の記号、後ろにテキストを配置すると、これら 2 つのタグが非表示になったり、表示されたりするという問題が発生しました。もう一度、2 番目のスパンが新しい行に変更されますが、それが再表示されると、両方のスパンに 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");	}	}

すべてのマスターを召喚します: @ Dielianhuayu @ Su Xiaomiao @ sysdzw @ a人生の珍しいチキン @ 高尚な感情

ディスカッションに返信 (解決策)

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

inline: 指定されたオブジェクトはインライン要素です。
block: オブジェクトをブロック要素として指定します。

スパンはデフォルトではインライン要素であり、再表示するときはインライン要素に設定する必要があります
うろ覚え

これを忘れていました、ありがとう!

CSS の設定は inline-block です
再表示するときに inline-block に設定することもできます
$(".level1").children("span").css("display", "inline -block" );

または、表示と非表示を切り替えるには、 Hide() と show() を使用します。これにより、要素の以前の表示状態が自動的に記録されます