Javascript 如何对齐同一行中的多个列表？

发生了什么：

我想发生的事：

HTML:

JS:

---

我希望所有的列表水平排列。当我使用绝对定位时，文件下一部分中的文本不会向下移动，因此我的列表与它冲突。我怎样才能使它们排列成一行，并防止它们与它下面的标题相交？

试着为每个div添加

表

。这应该可以根据您的需要工作

<table>
   <tr>
      <td>
         <div1 class="inner" style="display:none;">
            ...
         </div1>
      </td>
      <td>
         <div2 class="inner" style="display:none;">
           ...
         </div2>
      </td>
   </tr>
</table>

...
...

尝试切换显示：内联块或向左浮动

为什么我没有想到这个！非常感谢。

div1 {
    color:blue;
}
div2 {
    color:blue;
    position:relative;
    left:150px;
    }
div3 {
    color:blue;
    position:relative;
    left: 300px;
}

function showSpoiler1(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div1")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

function showSpoiler2(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div2")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

function showSpoiler3(obj)
    {
    var inner = obj.parentNode.getElementsByTagName("div3")[0];
    if (inner.style.display == "none")
        inner.style.display = "";
    else
        inner.style.display = "none";
    }

<table>
   <tr>
      <td>
         <div1 class="inner" style="display:none;">
            ...
         </div1>
      </td>
      <td>
         <div2 class="inner" style="display:none;">
           ...
         </div2>
      </td>
   </tr>
</table>