我正在尝试使用锚标签创建菜单,并且它们应该彼此相邻,因此相关链接可以与边框连接.这是一些示例代码:
<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>标签之间的换行引起的.可以删除这些换行符,问题就会消失,但代码的可读性要低得多.
是否可以保持换行但不显示空格？
您应该通过将CSS更改为以下框来将框变为块<a>:
a {
border: 1px solid #939393;
margin: 15px;
padding: 8px;
display: block;
float: left;
}