HTML文本紧挨着闪烁文本？

Question

所以我使用一个字母的闪烁文本，即“|”。我已经设置了闪烁文本的代码。

我的问题是。如何将文本放在“|”的左侧那不眨眼？我一直试图这样做。但当我把文字放在“|”的左边“|”似乎在我的文本下面。

我的眨眼替代代码：

<p id="blink">|</p>
<script>
 var blacktime = 400;
 var whitetime = 400;

 setTimeout(whiteFunc,blacktime);
 function whiteFunc(){
 document.getElementById("blink").style.color = "white";
 setTimeout(blackFunc,whitetime);
}
 function blackFunc(){
 document.getElementById("blink").style.color = "black";
 setTimeout(whiteFunc,blacktime);
}
</script>

Answer 1

包裹“|”在<span>

内

html块元素中的<p> - 元素，这意味着未包含在<p>内的所有内容都位于此元素的顶部或下方。轻松将“管道”-symbol包装在<span>内，<div>是<p> Some text before the <span id="blink">|</span> </p> 元素的内联兄弟（这是一个块元素）。

总结一下，请参考以下代码段：

position: relative

  

为了更好地理解/测试自己，请查看此jsFiddle

Answer 2

添加display: inline css属性。

＆＃13;

＆＃13;

p {display: inline;}

＆＃13;

<p>hii</p><p id="blink">|</p>
<script>
 var blacktime = 400;
 var whitetime = 400;

 setTimeout(whiteFunc,blacktime);
 function whiteFunc(){
 document.getElementById("blink").style.color = "white";
 setTimeout(blackFunc,whitetime);
}
 function blackFunc(){
 document.getElementById("blink").style.color = "black";
 setTimeout(whiteFunc,blacktime);
}
</script>

＆＃13;

＆＃13;

＆＃13;