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代替吗？

编辑：

BTW我会使用list-items来显示分页器。

Answer 2

添加行高：30px; div.pagination

Answer 3

我复制了你的代码，它看起来不错，但试试这个

div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 5px 10px; }

衬垫将边框推到外面。所以你可能需要一些余地来推动链接。

Answer 4

添加

display:block; width:10px; float:left;

到

div.pagination a