用于调整元素位置的CSS

Question

我有一个灯箱可以展示一些东西。通过几行HTML代码和CSS，灯箱工作正常。 在灯箱内，有一个“关闭窗口”链接。我想点击它然后关闭表格。预计在表格的底部，但现在不是。

我认为这是一个CSS风格的问题。该演示位于jsfiddle demo.

 <a id="show-panel" href="#">Show</a>
        <div id="lightbox-panel">
          <h2>Title</h2>
            <p>Goal: </p>
                <br />
          <span>
          <ul style="float:left"><li>Goal 1</li><li>Goal 2</li><li>Goal 3</li></ul>
                </span>

          <p style="float:left" align="center"> <a id="close-panel" href="#">Close this window</a> </p>
        </div>
        <!-- /lightbox-panel -->
        <div id="lightbox"></div>
        <!-- /lightbox --> 

感谢您的帮助。

Answer 1

你正在以错误的方式使用花车，这是你正在寻找的吗？

FIDDLE

Answer 2

从float:left和ul代码

中删除p

Fiddle

Answer 3

尝试添加到您的CSS：

#close-panel {
    position: absolute;
    bottom: 0px;
    right: 0px;
}