将Collapsible div与<li>放在同一行

Question

在我公司的一个网站上，我们在底部有版权声明，我想为我们的退款政策添加一个管道角色，然后是一个可折叠的div。这一切都有效，但退款政策可折叠的div一直出现在版权之下。我怎样才能把它放在同一条线上？这是我的代码：

<section id="footer">
    <div class="container inline-block">
        <ul class="copyright">
            <li>&copy; @DateTime.Now.Year.ToString() Securities Training Corporation. All rights reserved. |     
                <div class="panel-group">
                <div class="panel panel-default">
                     <div class="panel-title">
                          <a data-toggle="collapse" href="#collapse1">Refund Policy</a>
                     </div>
                     <div id="collapse1" class="panel-collapse collapse">
                          <table border="0" cellpadding="2" cellspacing="0" style="width: 580px" font-size="12">
                               <tr>
                                   <td>
                                       <br />
                                            <span>This is our Refund Policy in the collapsible div
                                   </td>
                               </tr>
                          </table>          
                      </div>
                 </div>
                 </div>
             </li>
        </ul>
    </div>
</section>

代码多于此但却无关紧要。我把容器放在同一个li标签上。当然我只希望可折叠标题与copywrite在同一行。

Answer 1

您需要首先制作面板元素inline-block（或者给它一个明确的宽度）。用于使用CSS定位它的选择器可能是：

#footer .copyright .panel-group {}

<强> Demo

请注意，我已将宽度从政策表中删除。 （不知道为什么你还要使用表格进行布局。）此外，如果您使用页脚列表，请将各个信息节点放在单独的列表项中，或者不要使用列表。否则，屏幕阅读器用户会感到困惑。

<强> Improved demo