Question

这是我的代码

<script type="text/javascript">

function toggle(obj) {
      var obj=document.getElementById(obj);
      if (obj.style.display == "block") obj.style.display = "none";
      else obj.style.display = "block";
}

<body>

<button type="button" style="width: 150px; height: 50px;"
onClick="toggle('miniDisplay')"> minicom </button>
<div id="miniDisplay" style="display:none;">

<p style="text-align:center;">connect to minicom and display</p></div>
</body>

目前，文本显示按钮所在的行。我希望它显示在同一行。我知道它是中心对齐的，它位于另一条线上的按钮下方。

Answer 1

更改＆＃34;阻止＆＃34; to＆＃34; inline-block＆＃34;在你的javascript中。

Answer 2

您的div是块级元素，这意味着它将展开以占据其容器的整个宽度。改为将其更改为内联块。

function toggle(obj) {
      var obj=document.getElementById(obj);
      if (obj.style.display == "inline-block") obj.style.display = "none";
      else obj.style.display = "inline-block";
}

<强> jsFiddle example

如何使文本按钮切换显示在我的按钮旁边而不是新行？

2 个答案: