分页思路

在制作网站时,很多分页都是采用li的显示为内嵌,但这样不利于定义背景,所以最好的办法是让li显示为块加浮动去解决,但这里有个问题,因为分页是不固定的,而又要让其始终居中,ul的宽度就无法去固定,所以按平时常用的margin或是text-align就不起作用了,想让分页始终居中,就要按以下的方法去定义。
1.文字居中定义
文字居中始终是要的,所以首先给予ul外层div一个text-align(文本对齐:居中),还可以给一个“溢位:隐藏(overflow: hidden;)”,当然也可以定义一下高和宽。
2.ul定义
ul不能定义宽度,我们只能给一个定位,类型为相对(position: relative),置入左为50%(left: 50%),当然也可以给一个浮动。请注意,ul千万不能用溢位:隐藏(overflow: hidden;),这样,部分li就无法显示。
3.li定义
li的定义跟ul差不多,宽度不固定,同样给一个定位,类型为相对(position: relative),置入右为50%(right: 50%),恰恰和ul相反,这样定义后li就可以无论分页多少始终居中了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>by eric zheng</title>
<style type="text/css">
    *{margin:0; padding: 0;}
    ol{list-style: none;}

    ol{
        height: 32px;
        border: solid 1px red;
        position: absolute;
        left: 50%;
    }

    li{
        position: relative;
        left: -50%;
        width: 30px;
        height: 30px;
        border: solid 1px #ccc;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        margin: 0 5px;
        float: left;
    }

</style>
</head>

<body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ol>
</body>
</html>

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,286评论 1 91
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 320评论 0 1
  • 1. 各个浏览器默认的内外边距不同 解决:*{margin:0;padding:0;} 2. 水平居中的问题 问题...
    哓两々阅读 1,153评论 0 4
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 1,919评论 0 30
  • 《星河》 只有在心灵最静的那一刻 才能听到遥远流动的星河 一颗星 就像手里的一枚棋子 能听到自己的心跳 却无法将自...
    诗人常怡阅读 141评论 2 2
  • 对于这样的问题,我一贯的想法就是好好谈一场恋爱,一生就谈一次。而今天听了他的故事,虽然有点不能接受,但你又不能拿什...
    席文月阅读 370评论 0 1
  • 恋爱时———看电影,喝咖啡,吃牛排,都随你…… 恋爱时———每天穿戴整齐,没有胡渣,布鞋的白边总是很洁净…… 恋爱...
    Lee楠丫阅读 75评论 0 0
  • 沪江网校Lena老师:上海外国语大学英语教育专业,国内最高英语水平测试TEM-8专八小红本持有者。标准的美式发音,...
    沪江中小幼阅读 206评论 0 0