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

编辑:

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