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

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

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

CSS

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