您好,欢迎访问一九零五行业门户网

两个span标签隐藏后再显示不在同一行_html/css_WEB-ITnose

最近在做树图,自己手写的,现在突然发现个问题,我在一行放置了两个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:
dddddd

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

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()显示隐藏,这个会自动记录元素之前的显示状态
其它类似信息

推荐信息