ul, ol, li { list-style:none; }
img { border:0; }
a, a:link, a:visited { color:#333; text-decoration:none; }
.pagenavi { border:3px solid gray; padding:10px;}
.pagenavi ol { overflow:hidden; margin:0 auto; }
.pagenavi li { float:left; text-align:center; margin-left:1px; _display:block;}
.pagenavi li.first { margin-left:0; }
.pagenavi li a { display:block; width:2.5em; padding:5px; background-color:silver; }
.pagenavi li a:hover { color:#fff; background-color:red; }
.pagenavi li a.current { background-color:orange; }
<script type="text/javascript">
function pageAlign(containerID) {
var pagelist = document.getElementById(containerID);
var liEl = pagelist.getElementsByTagName("LI");
var olWidth = 0;
for (i=0; i<liEl.length; i++) {
olWidth += liEl[i].offsetWidth;
}
pagelist.style.width = olWidth + liEl.length + 2 + "px";
}
</script>
<div class="pagenavi">
<ol id="pagenum">
<li class="first"><a href="#">처음</a></li>
<li><a href="#">이전</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#" class="current">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">다음</a></li>
<li><a href="#">끝</a></li>
</ol>
</div>
<script type="text/javascript">pageAlign("pagenum");</script>