我如何让这些单选按钮串联排列

Question

我正在使用“公开显示”类来显示按钮下方的内容。我已经尝试过使用CSS进行一些操作，并尝试在html标签周围移动，但这会导致问题。

我用我要尝试的特定代码更新了我的问题。先前的链接是类似概念的通用代码段。 内容：https://jsfiddle.net/3qeryw75/1/

<h4>Which do you like more?</h4>
<div>
  <div>
    <input type="radio" name="choice-animals" id="choice-animals-dogs" required>
    <label for="choice-animals-dogs">I like dogs more</label>

    <div class="reveal-if-active">
      <label for="which-dog">Good call. What's the name of your favorite dog?</label>
      <input type="text" id="which-dog" name="which-dog" class="require-if-active" data-require-pair="#choice-animals-dogs">
    </div>
  </div>

Answer 1

您可以将它们包装在<div>中，并使用<div> ... {p>

display: inline-block

Answer 2

不确定这是否是您想要的，但是请尝试以下操作：

form > div > div {
    padding: 5px;
    width: 150px;
    display: inline-block;
}

这是您应该得到的结果：