html - li元素跳出ul元素，位置: relative issue

Question

Tristans.tk
在此站点上，请查看底部的分页链接。 li 元素跳出 ul 元素，我不希望这样。这是我的 PHP 脚本和 CSS:

$pages=ceil(count(get('SELECT * FROM posts'))/$ipp);
echo "<div class='mid_align' id='pages_div'><ul id='pages_ul'>";
for ($i=1;$i<=$pages;$i++) {
    $d=$i-1;
    echo "<li><a href='index.php?page=$d'>$i</a></li>";
}
echo "</ul></div>";

.mid_align {
    margin-left: auto;
    margin-right: auto;
}
#content #pages_div{
    width: 200px;
    border: 1px solid #000;
    height: 30px;
}
#content #pages_ul {
    list-style: none;
    position:relative;
}
#content #pages_ul li{
    float: left;
    position: relative;
}
#content #pages_ul li a{
    height: 20px;
    width: 30px;
    border: 1px solid #000;
    display: block;
}

有什么问题吗？

Answer 1

您没有重置您的CSS 代码。

这会起作用:

ul#pages_ul{
    margin:0;
    padding:0;
}

我建议你使用一些 cssreset future 。