display:inline-block列表布局经常会遇到的“换行符/空格间隙问题”


<html>
<head>
    <meta charset="UTF-8">
    <title>居中导航title>
    <style>
        ul{text-align: center;height: 30px;line-height: 30px;/*background-color: #f00*/;}
        li, a{display: inline-block;width: 80px;height: 100%;background-color: #f00;}
        li{/*margin: 0 -4px;*/list-style: none;}
        a, li.cur a{color: green;text-decoration: none;}
        a:hover, li.cur a{background-color: #c00}
    style>
head>
<body>
    <ul class="m-nav">
      <li><a href="#">推荐a>li>
      <li class="cur"><a href="#">歌单a>li>
      <li><a href="#">大牌DJa>li>
      <li><a href="#">歌手a>li>
      <li><a href="#">新碟上架a>li>
    ul> 
body>
html>

这里写图片描述

diasplay:inline-block产生间隙原因:inline-block元素间有空格或是换行了间隙。

方法一:li{font-size:0;}

适用范围:只适用于图片间的间隙。不适用于表单中有文字的表单项。font-size会清除文字。
这里写图片描述

方法二:设置letter-spacing

<style>
        ul{ /*font-size: 0;*/ text-align: center;height: 30px;line-height: 30px;/*background-color: #f00*/;letter-spacing: -8px;}
        /*在ul中设置letter-spacing使每个li间距为-8px,间隙就变没  了*/
        li, a{display: inline-block;width: 80px;height: 100%;background-color: #f00;}
        li{/*margin: 0 -4px;*/list-style: none;letter-spacing: 0px;}/*在li里设置letter-spacing恢复为0,正常显示*/
        a, li.cur a{color: green;text-decoration: none;}
        a:hover, li.cur a{background-color: #c00}
    style>

这里写图片描述
inline-block 产生的空隙与父级元素继承或者设定的 font-family、font-size 有关。
inline-block空隙–letter-spacing与字体大小/字体关系数据表

方法三:设置li的margin。li{margin: 0 -4px;}

li{margin: 0 -4px;list-style: none;}

这里写图片描述

你可能感兴趣的:(css)