javascript - 闪烁文本旁边的 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> 里面

<p> - html block 元素中的元素，这意味着所有未包含在 <p> 中的元素将在此元素之上或之下。轻松地将“管道”符号包裹在 <span> 中这是 <div> 的内联兄弟元素(这是一个 block 元素)。

总结一下，看这段代码:

<p>
  Some text before the <span id="blink">|</span>
</p>

For better understanding / testing for yourself check out this jsFiddle