行内块空白解决方案

最新推荐文章于 2023-12-08 09:49:08 发布

Muqiu7890

最新推荐文章于 2023-12-08 09:49:08 发布

阅读量216

点赞数

分类专栏：日常总结

本文链接：https://blog.csdn.net/qj6837/article/details/84575735

版权

日常总结专栏收录该内容

51 篇文章 0 订阅

订阅专栏

举下面这个例子：

<!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>

效果图：

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

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

<!--法一-->
<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
    }

Muqiu7890

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
行内块空白解决方案

举下面这个例子：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;style&gt; nav
复制链接

扫一扫