zoukankan      html  css  js  c++  java
  • [笔记]ul>li>a做分布时, 让其居中显示效果

    结构:

    1   <div id="page">
    2     <ul>
    3       <li><a href="#">首页</a></li>
    4       <li><a href="#">1</a></li>
    5       <li><a href="#">2</a></li>
    6       <li><a href="#">3</a></li>
    7       <li><a href="#">末页</a></li>
    8     </ul>
    9   </div>

    css语法:

    1   ul{text-align: center;}
    2   ul li{display: inline;margin-right: 6px;}
    3   ul li a{display: inline-block;padding: 4px 10px;font-size: 12px;border: 1px solid #E9E9E9;}

    关键说明:

    1 li的display必须为inline, 这样, 有两个好处, 一个是不用float:left, li就可以是一行显示, 另外发现一个问题, 如果display为inline-block时, chrome和火狐的没问题, 但在IE内核上运行, 一个li就独占一行, 除非设置width, 再加float:left; 但这样又会引发另外一个问题, 就是ul整体的居中, 一个是clear:both; 再就是给ul设置width, 再margin: 0px auto; 但在ul开始时宽度不明确时, 固定了宽度, 当后期页数太多, 或li页码字符太多了, 把整个ul撑开了, 页码就会变成双行显示, 没法自适应, 用上面的方法, 只要div#page的宽度足够, 就不会出现双行显示的问题.

  • 相关阅读:
    C#中Linq查询基本操作
    Python中的四种数据结构
    20200917练习题
    SRS搭建自己的直播、点播系统
    20200916练习题
    20200915练习题
    20200914练习题
    20200911练习题
    UTF-8最多编码字符数(最多可以容纳多少数量的字符)?
    k8s新手必看
  • 原文地址:https://www.cnblogs.com/dilex/p/5772076.html
Copyright © 2011-2022 走看看