zoukankan      html  css  js  c++  java
  • 设置display:inline-block 元素间隙

    上代码:

    <div class="page">
    <a href="" class="num">共1231条</a>
    <a href="" class="">首页</a>
    <a href="" >1</a>
    <a href="" >2</a>
    <a href="" >3</a>
    <a href="" >4</a>
    <a href="" class="">末页</a>
    </div>
    .pgae a{
      display: inline-block;padding: 9px 15px;height: 40px;border: 1px solid #979797;color: #333font-size: 16px;line-height: 22px;}

    a标签之间 有间隙 是因为 页面 中有空格的问题 

    自己最常用的方法是 给 .page 设置font-size:0 或者直接 把display换成float当然还有很多方法 

    1.可以改变格式将a标签间距去掉:<a href="" >3</a><a href="" >4</a> ,但是如果是php或者别的方法循环出来的数据就比较难实现了。

    2.可以发现中间的间隙其实也是字体(font-size:0会奏效),所以可使用letter-spacing:-X(不同浏览器值可能不同),还是给父容器(.page)设置然后再给a标签恢复。

    ......

    
    
  • 相关阅读:
    JavaScript: RegExp + replace
    JavaScript:布局
    DOM和BOM区别
    正则表达式
    a report about the history of pragrem
    web第6次作业position
    web api
    DOM Event:事件流动(Event Flow)
    FOR衍生对象
    前端的发展
  • 原文地址:https://www.cnblogs.com/aloneCode/p/6745432.html
Copyright © 2011-2022 走看看