Css 以垂直方式显示收音机和div元素

在一个表单中有一个无线电选择的结构

现在，要显示的十六个选项在示例中只有两个以水平方式一个接一个地显示

我想把收音机的输入和随行的div并排放置。下一个应该以垂直方式显示在右下方，以此类推

对于.hierarq，尝试使用display:run-in，但元素是水平放置的。 对于display:list项，项是垂直放置的，但是尽管javascript在表单中的每个元素的类中添加了hidden并删除了visible，但是在选择了一个选项之后，单选选项及其div仍然是可见的。 如果display:block，我会遇到与display:list项相同的问题

我该怎么解决这个问题呢？

你是说像这样

如果是，可以使用span而不是div。这样它将包装在单选项旁边

html

---

在例子中是这样的。我没有使用“”，因为我不想更改构建表单元素的javascript代码。但是，如果没有更好的选项，我将插入“”。在这个例子中，有什么不同呢？正如我前面提到的，如果使用span，文本选项0，选项1等等。。将在单选按钮旁边换行。如果您不想使用任何p标记和所有标记，请检查此链接

<div id="hier_all">
    <h2 id="tit_hierarq" class="hierarq visible">Choose</h2>
    <h3 id="tit_hierarq_help" class="hierarq visible">one of the options</h3>
    <form id="form_hierarq" class="hierarq visible">

        <input id="hierarq0" class="hierarq visible" type="radio" name="radioButHierarq" value="0">
        <div id="hierarq0" class="hierarq visible">option 0</div>

        <input id="hierarq1" class="hierarq visible" type="radio" name="radioButHierarq" value="1">
        <div id="hierarq1" class="hierarq visible">option 1</div>

<p>
    <input id="hierarq0" class="hierarq visible" type="radio" name="radioButHierarq" value="0">
<span id="hierarq0" class="hierarq visible">option 0</span>

</p>
<p>
    <input id="hierarq1" class="hierarq visible" type="radio" name="radioButHierarq" value="1">
<span id="hierarq1" class="hierarq visible">option 1</span>

</p>