行内块空白解决方案

作者: 叹玖 | 来源:发表于2018-06-06 20:57 被阅读0次

行内块空白解决方案
js中和android手机复制文本到剪切板问题
用CSS/CSS3 实现水平居中和垂直居中，水平垂直居中的方式
注意img行内块元素处理
css之行内.块.行内块
行内块
2018-07-15
CSS行块级元素
入门任务8
10. CSS 排版

举下面这个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    nav a {
        display: inline-block;
        padding: 5px;
        background: red;
    }
</style>
<body>
<nav>
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#">Three</a>
</nav>
</body>
</html>

效果图：

spaces.png

接下来将讨论如何将图片衔接在一起。在导航的情况下，它可以避免小的不可点击的间隙。

一.删除空格

空格产生原因：在元素之间有空格（一个换行符和几个制表符被视为一个空格。
解决方案：

<!--法一-->
<nav>
    <ul>
    <li>
        <a href="#">One</a></li><li>
        <a href="#">Two</a></li><li>
        <a href="#">Three</a></li>
    </ul>
</nav>

<!--法二-->
<nav>
    <ul>
    <li><a href="#">One</a></li
    ><li><a href="#">Two</a></li
    ><li><a href="#">Three</a></li>
    </ul>
</nav>

<!--法三，推荐-->
<nav>
    <ul>
    <li><a href="#">One</a></li><!--
    --><li><a href="#">Two</a></li><!--
    --><li><a href="#">Three</a></li>
    </ul>
</nav>

二.设置负边距

  nav ul li{
        display: inline-block;
        margin-right: -5px;
        background: red;
    }

在较老的浏览器有问题，但可保持代码格式。

三.跳过结束标记

<nav>
    <ul>
    <li><a href="#">One</a>
    <li><a href="#">Two</a>
    <li><a href="#">Three</a>
    </ul>
</nav>

虽然有效，但看着很奇怪。

四.直接用float实现

 ul {
        position: relative;
        left: 50%;
        top: 0;
        padding: 0;
        margin: 0 auto;
        display: block;
        float: left;
        clear: right;
        list-style: none;
        background: red;
    }
    li {
        position: relative;
        right: 50%;
        top: 0;
        padding: 10px;
        display: block;
        float: left;
        border: 1px solid black;
    }
    body {
        padding: 20px 0 50px 0;
        background: pink;
        border: 20px solid white;
    }

五。直接用flexbox实现

    nav ul{
        display: flex;
        padding: 5px;
    }
    li{
        list-style: none;
        background: slategrey;
        display: inline-block;
        /* inline block hack for IE 6&7 */
        zoom: 1;
        *display: inline;
        padding: 4px;
        color: white
    }