css不需要的重叠

Question

这是我的html：

<div class="pagination">Page 
<a href="page.php?submit=1&amp;page=2">&#171;</a>
<a href="page.php?submit=1&amp;page=1">1</a>
<a href="page.php?submit=1&amp;page=2">2</a>
<strong>3</strong>
<a href="page.php?submit=1&amp;page=4">4</a> ...
<a href="page.php?submit=1&amp;page=104">104</a>
<a href="page.php?submit=1&amp;page=4">&#187;</a>
</div>

我的CSS：

div.pagination                  { width: 90%; margin: 15px auto; float:right; text-align: right; }
div.pagination a                { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination strong           { border: 1px solid #0667B9; background-color:#FFFFFF; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination a:hover          { border: 1px solid #0667B9; background-color:#0667B9; padding: 3px 6px; color:#B4D6F2; margin: 1px; }

我得到的结果是：

你看到的问题是，事情正在重叠，这是我想避免的。

预先感谢您的任何帮助。干杯。

Answer 1

我认为这是因为你使用了float。

你可以用它来代替吗display: inline？

编辑：

顺便说一句，我会使用列表项来显示分页器。