如何在带有标签的同一行上显示一个按钮和复选框

Question

我希望一切都在一条线上。我尝试了div和span，但是你可以看到按钮和复选框分别在不同的行上。

这是以下代码的演示

https://jsfiddle.net/xa4d6ddk/

<style>
.controlhide{
display: none !important;
   }

   .controlshow{
       display:block !important;
   }

   input[type="radio"] {
  transform:scale(1.5, 1.5);
}
        .sameline {
            display:block;
    white-space:nowrap;
    overflow:hidden;
        }
        </style>
<button id="btnanswer_3d42aa17-e7be-455b-8afa-70fe4ee3ee0a" class="btn btn-success">pass</button><label class="controlshow"><input id="btnpassanswerright_3d42aa17-e7be-455b-8afa-70fe4ee3ee0a" name="pass" value="right" type="radio">Correct</label><label class="controlshow"><input id="btnpassanswerwrong_3d42aa17-e7be-455b-8afa-70fe4ee3ee0a" name="pass" value="wrong" type="radio">Incorrect</label>

Answer 1

三件事 - 你正在使用小提琴 - js小提琴的想法是将代码的所有组件分成html，csss和javascript面板。你好像在html部分都有它们。

其次，删除以下行：

   .controlshow{
       display:block !important;
   }

按钮，复选框和标签都显示在一行中 - 这不是您想要的。此编辑有效，因为该行强制所有.controlShow元素显示为块级元素 - 即：一个他们自己的行。只需编辑你的小提琴并删除该行以查看我的人。

和第三 - 建议不要使用！important，因为它会导致所有其他css规则，因此会导致这样的问题。