javascript - 使用 Javascript 阻止元素发送到下一行

Question

我有一个在开头隐藏的按钮元素。

但是，我必须使用 JavaScript 在某些触发器上显示它。但是当它被触发时，它会被推到下一行。见下图：-

我真正想要的是：-

这是我的 HTML 代码：-

<div id="toolbar">
  
<a href="#" class="btn btn-secondary">Launch Access Log Report</a>&nbsp;&nbsp;&nbsp;<a href="#" style="display: none" class="btn btn-secondary" type="button" id="fresh" >Refresh Table Updated</a>

</div>

以及将其推送到下一行的我的 JavaScript 代码：-

function check(data)
{
if (data === 'no')
{ document.getElementById("fresh").style.display='block';}
}

是什么搞砸了，请解释一下，我该如何解决这个问题。

标签： javascripthtml

Answer 1

display: block将从新行开始，并占据可用的全部宽度。使用display: inline-block或display: inline代替。

使用display: block

<button onclick="show()">Show</button>

<div>
  <a href="#">Launch Access Log Report</a>
  <a href="#" style="display: none; background-color: red;" id="fresh">Refresh Table Updated</a>
</div>

<script>
   function show() {
     document.getElementById("fresh").style.display = "block";
   }
</script>

使用display: inline-block

<button onclick="show()">Show</button>

<div>
  <a href="#">Launch Access Log Report</a>
  <a href="#" style="display: none; background-color: red;" id="fresh">Refresh Table Updated</a>
</div>

<script>
  function show() {
     document.getElementById("fresh").style.display = "inline-block";
  }
</script>