[HTML/CSS] ul元素居中处理

最新推荐文章于 2022-01-25 15:01:25 发布

weixin_30788619

最新推荐文章于 2022-01-25 15:01:25 发布

阅读量336

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gaoxihan/p/3556051.html

本文介绍了一个使用CSS和HTML实现的简单分页导航条样式。通过内联块显示和定位技术，使得分页导航条居中并对齐。代码中包含上一页、下一页链接及多个页码选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS:

        <style type="text/css">
    

            #nav_sub_page {
                text-align: center;
                width: 80%;
            }

            #nav_sub_page ul {
                display: inline-block;
                margin: 10px 20px;
                padding: 0px;
            }

            #nav_sub_page ul li {
                display: inline;
            }

            #nav_sub_page ul li a {
                display: inline-block;
                width: 25px;
                height: 25px;
            }

        </style>

HTML:

<div id="nav_sub_page">
    <a id="sub_prev" href="#">&lt;&lt;上一页</a>
    <ul>
        <li>
            <a href="#/1" class="active">1</a>
        </li>
        <li>
            <a href="#/2">2</a>
        </li>
    </ul><a id="sub_next" href="#">下一页&gt;&gt;</a>
</div>