html – 如何让标签之间的空格不显示？

发布时间：2020-12-14 23:27:47 所属栏目：资源来源：网络整理

导读：我正在尝试使用锚标签创建菜单,并且它们应该彼此相邻,因此相关链接可以与边框连接.这是一些示例代码： htmlhead style type="text/css" a { border: 1px solid #939393; margin: 15px; padding: 8px; } a:hover { border-color: #111; } a.collapse-left { b

我正在尝试使用锚标签创建菜单,并且它们应该彼此相邻,因此相关链接可以与边框连接.这是一些示例代码：

<html>
<head>
    <style type="text/css">
        a {
            border: 1px solid #939393;
            margin: 15px;
            padding: 8px;
        }
        a:hover {
            border-color: #111;
        }
        a.collapse-left {
            border-left-width: 0px;
            margin-left: 0px;
        }
        a.collapse-right {
            border-right-width: 0px;
            margin-right: 0px;
        }



    </style>
</head>
<body>
    <div class="body">
        <a href="#" class="collapse-right primary">This is</a>
        <a href="#" class="collapse-right collapse-left click">A group</a>
        <a href="#" class="collapse-left hover">Of Three</a>

        <a href="#" class="">I am by myself</a>

        <a href="#" class="collapse-right">We are</a>
        <a href="#" class="collapse-left">a pair</a>

    </div>
</body>
</html>

按钮之间有一些空白区域组合在一起.这是由< a>之间的换行引起的.标签.可以删除这些换行符,问题就会消失,但代码的可读性要低得多.

是否可以保持换行但不显示空白区域？

解决方法

您应该通过更改< a>的CSS来将框变为块.对此：

a {
    border: 1px solid #939393;
    margin: 15px;
    padding: 8px;
    display: block;
    float: left;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!