将按钮放在列表容器上方，右对齐

Question

我试图让一个按钮显示在无序列表上方，我希望它是正确的。 CSS样式“float：right”，它出现在右侧，但它与列表重叠。如何在不重叠列表的情况下让按钮显示在右侧？

代码：

<style>
.mylist { list-style-type: none; width: 100%; }
.mylist li { margin: 2px; padding: 2px; border: 1px solid black;}
</style>

<button style="float:right; display:block;">Preview</button>
<UL class='mylist'>
    <LI>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</LI>
    <LI>Test</LI>       
</UL>

Answer 1

将清除：添加到 mylist 样式。 演示：http://jsfiddle.net/JgeTm/

<强> CSS

.mylist{list-style-type:none;width:100%;clear:both}